box-sizing和calc()盒模型

CSS中盒模型：

CSS中盒模型分为两种，第一种是W3C的标准模型（即盒子的宽高等于内容的宽高，盒子的padding和border不计算在内），第二种是IE的传统模型（IE6以下，不含IE6，称为怪异模式或者QuirksMode，即盒子的宽高等于内容的宽高加上padding和border值）

问题：

当开发时，遇到盒子宽度需要占据整个屏幕的宽度时，设置宽度为100%，如若再加上border值，则会使其溢出盒模型，导致计算误差

解决方案：

1、使用box-sizing属性

该属性支持IE8以上及现代浏览器，需加前缀，-webkit-，-moz-，-ms-，-o-

box-sizing:content-box（默认，指其内容宽高）

box-sizing:border-box（指其盒模型的宽高等于内容宽高加上内边距padding和边框border值）

box-sizing:inherit（继承父元素的box-sizing属性）

2、使用calc()计算

该CSS3新增属性可以给元素的border、margin、padding、font-size、width等属性设置动态值，适合流式布局

calc()的运算规则

1、使用 + - * / 四则运算

2、可以使用百分比、px、em、rem等单位，且可以混用

3、表达式中有 + - 时，前后必须留有空格，* / 也建议留有空格

注意：calc()兼容IE9等现代浏览器，但是移动端浏览器现在并不支持，使用时，也需要加上前缀-webkit-calc(expression)等

例子：

需要使一容器占据整个屏幕宽度并且有边框

.box{

height:200px;

width:-webkit-calc(100% - 1px * 2);

width:-moz-calc(100% - 1px * 2);

width:calc(100% - 1px * 2);

}

注意：运算符之间要留有空格