重新认识盒模型

作者：zccst

一直认为盒模型简单到可以不用写任何这方面的东西，直接使用就可以了，直到近期发现我其实理解的有误差。


div的hight应该是pading-top + text + padding-bottom
div的width应该是pading-left + text + padding-right

2013-08-08
最新的理解
width不包括margin，也不包括padding。
比如一共800x600的区域，如果padding:10px 那么实际的width只能是780x580了。

查了一下，果然如此：
[img]http://dl2.iteye.com/upload/attachment/0088/0100/c915d5c7-63da-3b32-bec0-dcaf89494a84.gif[/img]

实例
[img]http://dl2.iteye.com/upload/attachment/0088/0106/9c2af1a8-69ee-35e8-94a2-de03a1995750.gif[/img]

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。


[b]浏览器兼容性[/b]
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。