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 */