css3盒模型

box-sizing

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

• border-box
• content-box（W3C标准盒模型）
• inherit

border-box：给盒子的宽高包括padding、border及内容的高度，也就说你给盒子设置width:100px;padding: 10px; border: 10px solid; 那么内容的宽度就只有100-10-10=80px; 给的padding 跟border越大 内容的宽度越小 也就是不管padding  border 的值怎么变 这三项加起来就是你的设定值就对了。

content-box：设置了此属性，那么你如果给盒子设置width = 100px，那么盒子的内容就为100px; 不会因为padding值或者border值变化而变化。

inherit: 规定应从父元素继承 box-sizing 属性的值。