盒子模型和box-sizing属性

盒子模型分类

• IE盒子模型
• 标准盒子模型（W3C盒子模型）

这两个模型的唯一区别是计算width和height时，IE盒子模型包含padding和border, W3C盒子模型则不包括。

CSS3指定盒子模型种类

• box-sizing: content-box
• box-sizing: border-box

border-box使用场景

• 如果网页有两块区域刚好等于网页区域时候，这个时候没有任何关系。
• 如果给元素加上border或者padding，样式会被顶下去。

如果使用border-sizing: border-box，就会完美避开这个问题，因为此时标签的宽度包括了边框和内边距。
当需要两个宽度为50%的div确保并列时，设置box-sizing:border-box。此时的width:50%，是content+padding+border的宽度。