July 12, 2004

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

boxmodel.png

  • 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模型结构图。
cssboxmodel.gif

参考文献：

  1. CSS Box Model

  2. Eric Meyer, CSS 2.0 Programer's Reference

  3. The Box Model Problem

Posted by Hilton at July 12, 2004 05:47 PM | TrackBack
Comments

Please check out the pages about... Thanks!!!

Posted by: at December 2, 2004 12:40 PM

Please check the pages about...

Posted by: at December 1, 2004 06:38 PM

看了之后，才对宽度的定义有了一定的认识，谢谢

Posted by: jacek at July 24, 2004 06:48 AM
Post a comment









Remember personal info?