border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题

 

box-sizing

 

box-sizing的CSS属性是用来改变默认的CSS框模型

 

属性

 

初始值：content-box

适用于：接受的所有元素的宽度或高度

继承：无

媒体：visual

指定的：as specified

动画：no

规范秩序：独特的无歧义的正式语法定义的顺序

语法

 

box-sizing: content-box（默认样式） | padding-box | border-box

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

兼容性：

-webkit-box-sizing:     /*chrome safari android*/

-moz-box-sizing:         /*Firefox*/

box-sizing:                 /*Standard */

 

 

CSS3 calc() 会计算的属性

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。

calc()能做什么？

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {
  width: calc(expression);      /*expression是一个表达式，用来计算长度的表达式。*/
}

calc()使用通用的数学运算规则，但是也提供更智能的功能：

1、使用“+”、“-”、“*” 和 “/”四则运算；

2、可以使用百分比、px、em、rem等单位；

3、可以混合使用各种单位进行计算；

4、表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

5、表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器 厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

-moz-calc(expression);/*Firefox*/
-webkit-calc(expression);/*chrome safari*/
calc();/*Standard */