1.calc() 用于动态计算长度值
注意：运算符前后都需要保留一个空格
<style>
.big_box{
width: 100%;
position: relative;
}
.calc_test{
position: absolute;
width: calc(100% - 100px);
top: 50px;
left: 50px;
background-color: #ccc;
height: 500px;
}
</style>
<body>
<!--
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
-->
<div class="big_box">
<div class="calc_test">
</div>
</div>
</body>
会根据外层盒子大小变化
2.var() 用于插入自定义的属性值
类似定义一个全局变量，可以共用这个属性值
可以通过这个属性定义全局属性，比如设置主题颜色改动，只需要更改这一处即可
注意：定义的名称前必须有 - - ,后面的名称随便起
<style>
:root{
--testcolor:#ccc;
--aaaaaa:red
}
.box{
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.box1{
background-color: var(--testcolor);
}
.box2{
background-color: var(--aaaaaa);
}
.box3{
background-color: var(--testcolor);
}
</style>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
3.其他函数
查看其他函数
其他函数还是比较常用的，比如 rgb()、rgba()、linear-gradient()等
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
