box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content 的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
在标准w3c盒模型中，width和height指的是内容区域的宽度和高度。增加padding、边框和空白边不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
对内联元素设置margin-top，margin-bottom无效。设置padding才有效
网友评论