读《网站重构》(8):CSS2.0的box模型

读《网站重构》(8):CSS2.0的box模型

• Content -实际显示文本或图片的区域，其宽度由css的width定义。
• Padding -环绕Content的区域，通过padding-top, padding-right, padding-bottom, padding-left 和padding等属性来进行设定。
• Border -环绕padding的区域，通过border-top, border-right, border-bottom, border-left 和border 等属性来进行设定。
• Margin -环绕Border的区域，通过margin-top, margin-right, margin-bottom, margin-left 和margin 等属性来进行设定。

　　整个box的宽度= margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

　　ms IE5误解了width的含义，结果把width定义成了content+border的宽度之和。下列两行的定义显示是相同：

• CSS 2.0width: 100px; padding: 10px; border: 10px
• IE 5width: 140px; padding: 10px; border: 10px

IE6虽然改正了这个错误，则需要通过正确的Doctype来指定浏览器的显示模式。

　　Eric Meyer在她的"CSS 2.0 Programer's Reference"一书中，更为详细地画出了box模型结构图。

参考文献：

1. CSS Box Model
   
2. Eric Meyer, CSS 2.0 Programer's ReferenceThe Box Model Problem