什么叫盒子模型？有几种模式？

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。

盒子模型有几种模式？

1、W3C标准盒子模型
2、IE盒子模型

W3C标准盒子模型

标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；
W3C模型中：
　　　　　　CSS中的宽（width）=内容（content）的宽
　　　　　　CSS中的高（height）=内容（content）的高

IE盒子模型

怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding）。
IE模型中：
　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2
　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2

CSS3 box-sizing

box-sizing:content-box||border-box||inherit
box-sizing:content-box; 将采用标准模式的盒子模型标准

box-sizing:border-box; 将采用怪异模式的盒子模型标准

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

总结

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。