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

}

相关推荐
Mintopia3 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农8 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye11 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤15 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子19 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥1 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器