Jun 8

CSS2.0的box模型 不指定

chirs , 00:38 , 歪布天地 » CSS , 评论(0) , 引用(0) , 阅读(2659) , Via 本站原创 | |

  • 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 Reference
  3. The Box Model Problem
  4. The Box Model Problem
Tags: ,
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]