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

}

相关推荐
EndingCoder6 分钟前
状态管理详解:Context API、Redux、Recoil 和 Zustand 在 React Native 中的应用
javascript·react native·react.js
不想说话的麋鹿7 分钟前
《NestJS 实战:RBAC 系统管理模块开发 (二)》:菜单与权限路由设计
前端·node.js·全栈
前端流一7 分钟前
Babel的JSX转化插件--详解
前端
SynthWriter8 分钟前
从固定到弹性:实战Vue组件多分辨率适配全解析
前端·css
sunbyte11 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes(键盘码)
前端·javascript·css·vue.js·vue
Avan_菜菜12 分钟前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·npm·nuxt.js
蟑螂学前端13 分钟前
vue3结合拖拽组件draggable-next与element-plus实现组件拖拽效果
前端
snakeshe101015 分钟前
重构迷你React:引入wipRoot与协调子节点优化
前端
恋猫de小郭16 分钟前
iOS 26 beta1 重新禁止 JIT 执行,Flutter 下的 iOS 真机 hot load 暂时无法使用
android·前端·flutter
前端Hardy42 分钟前
实测!Three.js 实现动态粒子螺旋与星环环绕动画
前端·javascript