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()使用通用的数学运算规则，可是也提供更智能的功能：

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

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

三、能够混合使用各类单位进行计算；

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

五、表达式中有“*”和“/”时，其先后能够没有空格，但建议留有空格。

兼容性

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

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