盒模型学习(一)

盒模型概念:

html文档中的每个元素(element)和文本都会被转换为一个矩形盒,而html文档中元素树(tree of elements)最终在浏览器中是以树状结构的盒(tree of boxes)进行显示的。

Schematic representation of rel

这些盒的大小和位置取决于他们各自的属性,盒模型可分为块盒、行盒和行内盒

 

盒模型的结构:

浏览器会为每个元素生成四个嵌套的矩形框,分别为margin area,border area,padding area和content area。元素渲染成盒模型后的结构如下:

Diagram of a typical box, showing the content, padding,
    border and margin areas

盒模型的依赖关系:

block-level boxes:块盒内可包含行盒或块盒,但不会同时包含块盒和行盒,在必要的时候块盒内的行盒会被转化为匿名块盒(anonymous box)

Example:

表面上看似行盒与块盒<p>同时包含在<div>块盒中,其实“Some text”这段文本已被转换为匿名块盒。

1 <div>
2     Some text
3     <p>More text</p>
4 </div>

 

line boxes:

1. 行盒是虚拟的盒模型,是由行内盒或匿名行内盒组成的

2. 行盒的高度取决于一行中最高的行内盒

inline-level boxes:

1. 由inline elements 生成,如:<a>,<em>等html元素

2. 大小是由内容决定,设置width和height无效,行内盒的高度可经由line-height进行调整

 

posted @ 2013-03-31 17:50  Sheldon Ge  阅读(197)  评论(1编辑  收藏  举报