之前对于calc()接触的很少,也很少用,但是真正接触之后发现,这个用处还不小。
定义与用法
1.calc() 函数用于动态计算长度值。
2.需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
3.任何长度值都可以使用calc()函数进行计算;
4.calc()函数支持 “+”, “-”, “*”, “/” 运算;
5.calc()函数使用标准的数学运算优先级规则;
1.calc() 函数用于动态计算长度值。
通常用calc()来指定元素的长度,可以是width、height、border还是padding等。说白了,calc()就是css3的一个指定元素长度的属性,它的特殊之处在于它可以做计算,而且支持混合使用各种单位,比如%、px、em等。所以这个属性特别适用于那些自适应的布局。
.content {
min-height: calc(100vh - 128px);
}
.item {
width: calc(100% - 28px);
}
兼容性:在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持。
2.需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
特别声明:表达式中有“+”,“-”运算符的,前后必须要有空格,例如 “width:calc(100% - 20px)”这种写法;而对于“*”,“/”并没有这种要求,但为了风格的统一,建议前后也要留空格。
3.任何长度值都可以使用calc()函数进行计算;
通常用calc()来指定元素的长度,可以是width、height、border还是padding等。
4.calc()函数支持 “+”, “-”, “*”, “/” 运算;
特别声明:表达式中有“+”,“-”运算符的,前后必须要有空格,例如 “width:calc(100% - 20px)”这种写法;而对于*,“/”并没有这种要求,但为了风格的统一,建议前后也要留空格。
5.calc()函数使用标准的数学运算优先级规则;