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);

}

相关推荐
佚名猫4 分钟前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z6 分钟前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu8 分钟前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端9 分钟前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue12 分钟前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares14 分钟前
React hook之useRef
前端·javascript·react.js
kooboo china.23 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
天涯学馆27 分钟前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试
crary,记忆32 分钟前
Angular中Webpack与ngx-build-plus 浅学
前端·webpack·angular·angular.js