display:inline-block

1、簡介

設置了     inline-block屬性的元素      既擁有了block元素能夠設置width和height的特性，又保持了inline元素不換行的特性

 

舉例說明：之前咱們作橫向菜單列表的時候，咱們能夠經過li和float:left二者來實現，如今能夠經過li和display:inline-block。

 

 

能夠看到li元素能夠橫向排列，而且能夠設置width屬性。

默認狀況下，inline元素之間就有空隙出現，因此結合了inline和block屬性的inline-block屬性天然也有這個特色。
那這些空隙是什麼呢，它們是空白符！

 

 

消除空白符

在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合併成一個。咱們編寫代碼時寫的空格，換行都會產生空白符。因此天然而然的兩個元素之間會有空白符，若是將上述例子中的li標籤寫成一行，空白符消失，菜單之間也就緊湊起來了。

 

經過設置font-size屬性能夠控制產生的間隙的大小。
首先咱們將font-size設置成50px試試，修改CSS代碼以下：

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

能夠看到菜單之間的空隙變大了。
接着咱們設置font-site屬性爲0px，代碼以下

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

 

 

 

2、inline-block的應用

inline-block的應用什麼場景有哪些呢？咱們你們考慮一個技術的應用場景時，首先必定要思考的是技術的特性和需求是否符合。inline-block的特色是結合inline和block兩種屬性的特性，能夠設置width和height，而且元素保持行內排列的特性，基於這一點，全部行內排列而且能夠設置大小的場景都是咱們能夠考慮使用inline-block的應用場景。

下面舉例說明：

HTML

<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服裝城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妝館</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球購</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">閃購</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">團購</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍賣</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智能</a>
        </li>
    </ul>
</div>

CSS

 a, ul, li { padding: 0; margin: 0; list-style-type: none; }
 a { text-decoration: none; color: #333; } 
 .header ul { font-size: 0; text-align: center; }
.header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

 

關於inline-block的應用，只要是從左到右，從上到下，而且須要設置大小的列表均可以用它來實現，而這種需求是很是常見的，相比於float，我更推薦inline-block。

 

 

3、總結

1. 相比於使用float所帶來的問題，使用inline-block所須要注意的點主要是空白符帶來的問題，這一點也能夠很方便的解決。
2. 使用inline-block能夠很方便的進行列表佈局，更加符合咱們的思惟習慣

 

 

4、display:inline-block 帶來的問題和解決辦法

 

在平常工做中，會常常遇到兩個或多個元素並排排列的效果，之前會使用float等實現，float雖然方便好用，可是須要清除浮動，有時會帶來意想不到的bug

並且在移動端是不推薦使用float的，因此使用display:inline-block是一個不錯的選擇。

可是display:inline-block有時也會帶來各類問題，下面是我遇到的一些問題並附帶解決辦法（有的問題目前我尚未找到解決辦法）

 

 

 

 

 

1.  如圖所示是兩個並排的div，均設置爲display：inline-block

HTML

<div class="demo">
   <div class="first"></div>
   <div class="second"></div></div>

CSS

.demo > div{
  display: inline-block;
  border: 1px solid red;
  font-size: 30px;
}
.first{
   width: 100px;
   height: 100px;
}
.second{
   width: 120px;
   height: 120px;
}

能夠看出，兩個div中間有空白間隔，可是代碼中沒有任何margin，這種空白間隔是正常現象.咱們的代碼中的換行和空格等都會產生這樣的間隔，除非咱們把代碼首尾相連寫在一塊兒，可是這樣的代碼並不容易閱讀

還有一個解決辦法是設置父元素font-size：0；由於空白字符也是一個字符，只要設置爲0，則間隔就消失了，如圖所示：

 

 

 

 

 

 

 

 2.上圖是兩個空白div，其中並無任何內容，若是在其中一個div中加入內容，

 HTML

<div class="demo">
   <div class="first"><span>left</span></div>
   <div class="second"></div></div>

CSS不變

效果以下

加入內容的div相對之前的位置會偏移不少

或者咱們兩個div中都加入內容：

 HTML

<div class="demo">
   <div class="first">
      <span>left</span>
   </div>
   <div class="second">
      <span>right</span>
   </div></div>

兩個div變成了頂部對齊，而沒有內容時是底部對齊，下面咱們在右邊div再多加一些內容，效果以下：

而後咱們給右邊div設置字體font-size:50px，左邊不變，效果以下：

 

若是給右邊div加上margin-top：40；左邊不變，效果以下：

 

那加上padding呢，效果以下：

 

 

 

而後咱們發現，不管是設置字體大小，仍是設置padding，margin等，兩個div一直處在錯亂的狀態，並無整齊排列,可是左邊div和右邊div中的文字始終處於底端對齊的狀態！！

發現了規律，那解決辦法就出來了.

（1）給左右兩邊div都加上一句vertical-align：middle；效果以下：

此時，兩個div總體以中間對齊，若是兩個div高度一致，那天然就底部對齊啦

（2）給兩個div都加上一句overflow：hidden，效果以下：

 

此時兩個div是底部對齊。