inline-block的簡單理解

標籤：

1. 概念display:inline-block

    將對象呈現為inline對象，但是對象的內容作為block對象呈現。之後的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性，甚至更多，比如 inline-block 元素也可以設定 vertical-align 屬性。inline-block 後的元素就是一個格式化為行內元素的塊容器。其他的內嵌元素可以和其顯示在同一行，中間允許有空格。

 

2. 使用

   （1） display:inline-block可以用來處理行內元素不等高對齊排列問題（列表布局），防止出現過高元素下方沒有元素排列，而是被擠到該元素的右下方。（vertical-align: top/bottom;設定對齊的基準線）

  （2）修正IE6中浮動元素的雙邊距問題

  （3）水平放置多個類似塊blo ck元素而不需要使用float

  （4）使一個inline元素具有高寬邊距而其依然能夠保持inline

 

3. 水平間隙問題

    關於使用display:inline-block帶來的水平間隙問題，產生該水平間隙的原因主要是HTML中的分行符號、空格符、定位字元等合并為空白符，在字型不為0的情況下，空白符將會產生一定的寬度，即產生了元素間的水平間隙。

    解決該水平間隙的方法有：（1）字型大小設定為0，即font-size:0；此時要注意父元素字型大小設定後會影響到子項目字型大小，要記得將子項目字型大小重設！（2）合理地設定letter-spacing的值（負值）！（3）合理地設定word-spacing的值（負值）！（4）前一個標籤的結束標籤和後一個標籤的開始標籤連續使用，或者後一個嵌套標籤的結束標籤連續使用，不空格！合理的使用（1）（2）（3）（4）的css hack可以解決display:inline-block後元素間的水平間隙問題。

 

4. IE下實現display:inline-block的方法

    （1）先使用display:inline-block觸發塊元素，然後再定義display:inline，讓塊元素呈遞為內聯對象。兩個display要放在兩個css聲明中才會生效。

    div {display:inline-block;...}
    div {display:inline;}

    （2）直接讓塊元素設定為內聯對象display:inline;再觸發layout，如zoom：1；

    div {display:inline; zoom:1;...}

 

inline-block的簡單理解