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间距
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