css3-calc用法

css3--calc()使用

css3新增的一个功能，可以计算元素的长度

例如说：一个百分百布局中，分左右两侧，中间需要一个分隔空间，使用padding或者margin则会超出100%,这时候使用calc()来计算 就很完美

calc()运算规则

　　1.可以使用 + - * / 四则运算

　　2.可以使用px em rem %等单位

　　3.可以混合使用各种单位计算

　　4.使用 + - 运算时，符号前后必须有空格

　　5.使用 * / 运算时，前后可以没有空格，但是建议留有空格

calc()兼容

　　pc端兼容还可以 IE9 ff4.0+  chrom19+

　　移动端兼容不太好 只有 firefox for android 14.0”支持

使用的时候建议加上前缀

　　

使用

效果如下  全屏100%展示 左右两边有10px间距

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

意思是(width-(padding+border)*2-margin)

• 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
• 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com

转载于:https://www.cnblogs.com/Kyaya/p/6438421.html