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

}

相关推荐
kiteOffice5 分钟前
使用@page 边距 at 规则 + modern-screenshot 定制打印输出内容
前端
吃饭睡觉打豆豆嘛9 分钟前
深入解析 JavaScript 对象操作
javascript
HarryHY9 分钟前
VUE3 ref 和 useTemplateRef
前端·javascript·vue.js
穗余10 分钟前
WEB3全栈开发——面试专业技能点P7前端与链上集成
前端·web3
恋猫de小郭15 分钟前
Flutter 多版本管理工具 Puro ,它和 FVM 有什么区别?
android·前端·flutter
iam17 分钟前
使用 CSS 实现 iOS 26 液态玻璃(Frosted Glass)效果
css
火车叼位17 分钟前
理解 CSS Layer样式管理
css
杨超越luckly17 分钟前
“详规一张图”——新加坡土地利用数据
前端·数据库·arcgis·信息可视化·数据分析
10年前端老司机17 分钟前
svg 保姆级入门教程
前端·svg
该用户已不存在21 分钟前
OpenAI 用 Rust 重写 AI 工具,你的本地开发环境跟上了吗?
前端·javascript·rust