盒模型学习（一）
盒模型概念：
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 <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进行调整
