HTML、CSS学习总结一：块状元素、内联元素、内联块状元素

　　从开始接触HTML+CSS布局开始，也有将近半年时间了，除去中间打酱油的三四个月，自己也大概在上面花了一个月的功夫，时间不长，暂且把学过的东西总结一下。
　　首先谈谈HTML的元素，主要分三类，块状元素、内联元素和内联块状元素。

1. 块状元素display:block的特性是水平拉伸，垂直包裹，可以设置宽度和高度。对于拉伸我是这样理解的，比如先定义了页面的body，一般情况下body的宽度差不多等于页面的宽度（有8px的margin），这时如果你定义了一个p元素的话，如果未设置p元素的宽度，那么p元素会自动拉伸至body的宽度。包裹的意思就是p的垂直高度恰好能包住其中的文本内容，你写了几行文字就是几个line-height。块状元素还有个特性就是它的margin如果碰不到祖先元素的border或者padding，会与祖先元素垂直方向的margin-top、margin-bottom交叠。上下相邻的同级元素的margin也会交叠，就产生了margin合并。
2. 内联元素display:inline的特性的自动包裹，水平和垂直方向会自动包裹至内容的宽度。因为元素的内联的，是嵌入到行里面的，所以对内联元素垂直方向设置的margin-top、margin-bottom不会影响span元素的layout，但是水平方向设置的margin-left、margin-right会影响内联元素的缩进。因为其具有自动包裹的特性，所以overflow属性无效。
3. 内联块状元素display：inline-block，除了具有内联元素自动包裹的特性外，还具有块状元素可以设置高度和宽度的特性。内联块状元素还有一个重要的特性就是可以通过设置它的margin来改变其layout，但是内联块状元素的margin不与其他元素的margin交叠。

　　有如下的源代码:

<div style="position:relative; width:200px; margin:20px auto; height:200px; background-color:yellow; border:1px solid black;">
    <span style="font-weight:bold; position:absolute; top:0;left:0">block</span>
    <div style="width:120px; height:120px; background-color:green; margin:40px;">
    　　<div style="display:block; width:40px; height:40px; background-color:blue; margin:40px"></div>
    </div>
</div>

　　通过改变最里层div元素的display属性来比较三种元素：

block

 

---

inline-block

 

---

inline

.

　　可以看到，水平方向的margin是都不会合并的，但是垂直方向上，block产生了合并，inline的margin属性无效，而inline-block的margin不与其他元素的产生交叠。上例中，尽管设置了内联元素的大小为40px*40px，但事实上由于div中无内容，应该变成0*0的，为了方便表示，在最里层的div中加了一个span元素，内容是一个“.”。