盒模型概念：

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

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

 

盒模型的结构：

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

盒模型的依赖关系：

block-level boxes：块盒内可包含行盒或块盒，但不会同时包含块盒和行盒，在必要的时候块盒内的行盒会被转化为匿名块盒（anonymous box）

Example：

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

1 
     
      2     Some text3     
      
More text
4 
     

 

line boxes：

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

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

inline-level boxes：

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

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