C3的坑之inline-block

最近開始複習css一直在踩坑,今天分享一個inline-block

關於inline-block可能不少人都不熟悉,佈局這方面不少人用的都是flex或者浮動,flex很強大毋庸置疑的但是關於兼容性就不是很讓人滿意,而浮動雖然很兼容但是以爲清除浮動就很麻煩,於此我在一些大型網站,例如咱們的segmentfault的首頁導航展現用的佈局就是inline-block,以爲inline-block能夠擼一波,但是忽然發現這裏面也存在一些小問題,首先先po出代碼

<div style="background-color:green">
      <div style="width:40px;height:30px;background-color:red;">

      </div>
      <div style="width:40px;height:30px;background-color:red;">

      </div>
      <div style="width:40px;height:30px;background-color:red;">

      </div>
</div>

這時候咱們採起inline-block進行佈局,神奇的事情就發生了

<div style="background-color:green;">
      <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>
    </div>

本來的3個div並排在一塊兒,由於3個div變成了行內元素,因此也應該並排在一塊兒,可是....
這裏出現了兩個問題:

1. div之間出現間隔
2. 子div與父div之間有一個4px的間距

這裏會出現這種問題的緣由是由於 inline-block水平呈現的元素間，換行顯示或空格分隔的狀況下會有間距

div之間的間距解決的方法

在這裏我嘗試過一個方法就是設置margin-right爲負值,

<div style="background-color:green">
      <div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </div>
      <div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </div>
    </div>

在這裏咱們能看到第一個div與第二個div仍然有一個1px的間距,而第二個和第三個沒有間距,子div和父div沒有間距,說明咱們的問題不是在這裏

我在參考張旭鑫大神的博客深感佩服以爲採用這種方法最好:

給父div加這樣的css屬性

font-size:0
-webkit-text-size-adjust:none;

po出代碼

<div style="background-color:green;font-size:0;-webkit-text-size-adjust:none;">

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

那麼又有一個問題了,-webkit-text-size-adjust是什麼????

webkit內核的瀏覽器(chrome)中,當在css中定義的中文font-size小於12px的時候,瀏覽器仍然使用12px,這時就能夠用-webkit-text-size-adjust:none;

哈哈,這樣咱們的問題就解決了

---

最後說下inline-block的兼容性:參考這篇文章
-->
IE六、IE7不識別inline-block但能夠觸發塊元素。其它主流瀏覽器均支持inline-block。這就夠了,ie6,7就不考慮了,緣由嘛,你懂的...