CSS 基礎系列：inline-blcok和float

2019 年 11 月 7 日
筆記

1.比對：

簡單比對一下div+css布局中的inline-block和float的特點，同時附上使用inline-block之後元素之間產生空隙的解決方法。雖然設置浮動跟設置inline-block有些特徵類似，但兩者的區別還是非常明顯的:

文檔流（Document flow）: 浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。因此設置inline-block不需要清除浮動。當然，周圍元素不會環繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。
水平位置（Horizontal position）：很明顯你不能通過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。但是父元素內元素如果設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這還是因為浮動元素脫離文檔流的關係）。
垂直對齊（Vertical alignment）：在兩個div的高度不同時，兩種方式的對齊效果也不相同：

圖一：display:inlne-block屬性修飾的元素沒有脫離文檔流，當然會與在正常的文檔流中的元素一樣採取的底端對齊方式。圖二： float屬性修飾的元素在一定程度上脫離了普通文檔流的限制，只用考慮向某個方向浮動，所以會產生如圖的效果。區別來了！！！如果是使用display:inlne-block，則我們可以通過vertical-align來控制兩個元素的對齊方式：我們為兩個div分別添加一個屬性：vertical-align:middle

<div class="myContainer">       <div class="div1" style="display: inline-block;vertical-align: middle">       </div>       <div class="div2" style="display: inline-block;vertical-align: middle">       </div>  </div>

查看一下運行效果：

如圖，div1出現在了div2的居中位置。假如使用的是float，我們是沒辦法使div1位於div2的中間位置的。

空隙（Whitespace）： inline-block包含html空白節點。如果你的html中一系列元素每個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空隙。而浮動元素會忽略空白節點，互相緊貼。

2.總結：

什麼時候使用inline-block、什麼時候使用float，這取決於你的設計稿跟解決方法。通常來說，當你需要控制元素的垂直對齊跟水平排列時，使用inline-block；當你需要讓元素環繞某一個元素時，或者需要支援舊版本ie，或者不想處理inline-block帶來的空隙問題時，使用浮動。

3.如何消除inline-block帶來的空隙;

3.1 思路一：

元素間的間隙出現的原因是元素標籤之間的空格，把空格去掉間隙自然就會消失。來看以下幾種寫法：

寫法一/不建議使用：

<div class="demo">      <span>我是一個span</span><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span>  </div>

寫法二：

<div class="demo">      <span>我是一個span      </span><span>我是一個span      </span><span>我是一個span      </span><span>我是一個span</span>  </div>

寫法三：

<div class="demo">      <span>我是一個span</span><!--      --><span>我是一個span</span><!--      --><span>我是一個span</span><!--      --><span>我是一個span</span>  </div>

3.2 思路二：

取消span的結束標籤，這樣間隙就沒有了。為了兼容IE6/IE7，最後一個標籤需要閉合。

<div class="demo">          <span>我是一個span          <span>我是一個span          <span>我是一個span          <span>我是一個span</span>      </div>  .demo span{       background:#ddd;       display: inline-block;  }

3.3 思路三：

不管是思路一還是思路二，都只適用於寫靜態頁面的時候，一旦HTML是後台生成，就不生效了。這時還有一個辦法：在父容器上使用font-size:0。

<div class="demo">          <span>我是一個span</span>          <span>我是一個span</span>          <span>我是一個span</span>          <span>我是一個span</span>  </div>  .demo {font-size: 0;}  .demo span{          background:#ddd;          display: inline-block;          font-size: 14px; /*要設置相應的字型大小*/  }

原理：換行和回車會給各個span之間帶來空格，而空格會被當成字元處理，因此通過給父元素設置字體大小為0，則空格字元大小也為0，相當於消除了其大小。需要注意的是，一定要額外設置span中的字體大小，否則會繼承父元素的0大小字體。

3.4 思路四：

上面的思路其實已經很完美，但可惜不兼容Safari，以下給出終極方案,即font-size:0配合letter-space:-N px。

.finally-solve {  letter-spacing: -4px;/*根據不同字體字型大小或許需要做一定的調整*/  word-spacing: -4px;  font-size: 0;  }  .finally-solve li {  font-size: 16px;  letter-spacing: normal;  word-spacing: normal;  display:inline-block;  *display: inline;  zoom:1;  }