盒子模型是CSS中一个重要概念，理解了盒子模型才能更好的排版。
盒子模型（Box Modle）可以用来对元素进行布局，由实际内容（content）、内边距（padding）、边框（border）与外边距（margin）这几个部分组成。
盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪异模式下的IE5.5+）
理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。
W3C盒模型（标准盒模型）
通过上图我们可以看到标准盒模型的范围包括：content、padding、border、margin，并且content部分不包含其他部分。
标准盒模型的width与height只含content，不包括padding和border。
IE盒模型
ie盒模型也是包括content、padding、border、margin，和标准盒模型不同的是：ie盒模型大的content部分包含了padding和border部分。
IE盒模型的width与height是content、padding和border的总和。
以上就是css两种盒子模型的区别是什么？的详细内容，更多请关注0133技术站其它相关文章！
