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元素，內容是一個“.”。