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;...}