CSS中使用变量的两个函数var和calc

CSS/CSS3 变量var()函数和calc()函数计算的使用

var()变量

var变量的定义语法 : --变量名 (两个短横线加上变量名)

calc() 函数计算

calc使用的时候有几个地方需要注意:

  1. 运算符前后都需要保留一个空格

  2. 任何长度值都可以使用calc()函数进行计算;

  3. 支持 + - * / 运算;

  4. 使用标准的数学运算优先级规则;

例如

在body中定义:

body{

--width : 100px;

--height : 100px;

--color : red;

--fontSize : 18px;

}

在标签中使用:

div{

width: var(--width);

height: var(--height);

line-height: var(--height);

color: var(--bgColor);

font-size: calc(var(--fontSize) + 8px);

}

相关推荐
阿芯爱编程12 分钟前
最长和谐子序列,滑动窗口
前端·javascript·面试
你脸上有BUG32 分钟前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴1 小时前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆1 小时前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术1 小时前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪2 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚2 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
新中地GIS开发老师2 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学