display:inline-block與float

display:inline-block 既有行級元素的特性,也有塊級元素的特性,所以在同一行,能設置寬高,margin,padding

inline-block和float的區別

雖然設置float跟設置inline-block有些特徵相似,但二者的區別仍是很是明顯的:css

  1. 文檔流(Document flow):float元素會脫離文檔流,並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。所以設置inline-block不須要清除浮動。固然,周圍元素不會環繞這個元素,你也不可能經過清除inline-block就讓一個元素跑到下面去。
  2. 水平位置(Horizontal position):很明顯你不能經過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上,均不會影響父元素內浮動的元素。可是父元素內元素若是設置了display:inline-block,則對父元素設置一些定位屬性會影響到子元素。(這仍是由於浮動元素脫離文檔流的關係)。
  3. 垂直對齊(Vertical alignment):inline-block元素沿着默認的基線對齊。浮動元素緊貼頂部。你能夠經過vertical屬性設置這個默認基線,但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要緣由。
  4. 空白(Whitespace):inline-block包含html空白節點。若是你的html中一系列元素每一個元素之間都換行了,當你對這些元素設置inline-block時,這些元素之間就會出現空白。而浮動元素會忽略空白節點,互相緊貼
  5. IE6和IE7:Ie67對此屬性部分支持。若是你要兼容這些瀏覽器,必須解決這個問題。這不是個大問題,但值得留意一下。

顯示內聯浮點數的空白問題

解決空白問題html

  1. 刪除html中的空白:不要讓元素之間換行。
  2. 使用負邊距:你能夠用負邊距來補齊空白。
  3. 給父元素設置font-size:0:因爲空白的寬度與font-size有關係,設置這個屬性便可把空白的寬度設置爲0.在實際使用的時候,你還須要給子元素從新設置font-size。

何時使用inline-block,何時使用float

取決於你的設計稿跟解決方法。若是你須要文字環繞容器,那浮動是不二選擇。若是你須要居中對齊元素,inline-block是個好選擇。瀏覽器

網格中的浮動塊

上圖,把一系列元素設置了浮動,由於盒子二號寬度的關係,能夠發現盒子五號被擠進去了(這些元素都脫離了文檔流),這是圖片排列中很常見的問題。spa

網格中的內聯塊

上面的塊級元素被設置了inline-block。因爲他們沒有脫離文檔流,因此元素不會被某個過長的列擠上來。.net

原文: https://www.w3cplus.com/css/inline-blocks.html © w3cplus.com
相關文章
相關標籤/搜索