CSS3计算属性calc()的使用方法
calc() 只作用于属性值
设置宽度:width:calc(100vw – 123px);
说明:1、vw是width of view(port)的缩写;
2、100vw表示百分之百的视图宽度;
3、123px是需要减去的宽度;
4、减号的两边必须都有至少一个空格。
设置高度:height:calc(100vh-123px);
说明:1、vh是height of view(port)的缩写;
2、100vh表示百分之百的视图高度;
3、123px是需要减去的高度;
4、同理减号的两边必须都有至少一个空格。
可以应用全部属性,例如:
.nr {
font-size: calc(3vw + 2px);
width: calc(100% - 10px);
height: calc(100vh - 10px);
padding: calc(1vw + 5px);
}
也可以仅用于部分属性,例如:
.nr {
margin: 10px calc(2vw + 5px);
border-radius: 15px calc(15px / 3) 4px 2px;
transition: transform calc(1s - 120ms);
}
它甚至可以成为构成属性一部分的另一个功能的一部分! 例如,这里的calc() 用于渐变的色标中
.nr {
background: #1E88E5 linear-gradient(
to bottom,
#1E88E5,
#1E88E5 calc(50% - 10px),
#3949AB calc(50% + 10px),
#3949AB
);
}
calc() 用于长度和其他数值
以上所有示例本质上都是基于数字的。 我们会讲到一些数的使用注意事项(因为有时你不需要单位),但这是针对数字的数学,而不是字符串之类的东西。
.nr {
/* Nope! */
counter-reset: calc("My " + "counter");
}
.nr::before {
/* Nope! */
content: calc("Candyman " * 3);
}
CSS有很多长度,它们都可以与calc() 一起使用:
- px
- %
- em
- rem
- in
- mm
- cm
- pt
- pc
- ex
- ch
- vh
- vw
- vmin
- vmax
无单位的数字也是可以接受的,例如line-height:calc(1.2 * 1.2); 以及诸如transform:rotate(calc(10deg * 5));之类的角度。 您也可以不执行任何计算并且仍然有效:
.nr {
/* Little weird but OK */
width: calc(20px);
}
注意:calc()不能在媒体查询中使用。
本站的发展离不开您的支持,请在解决问题后再考虑是否为本站打赏或捐助。