CSS inline-block屬性概述及其使用示例

2024-07-11 08:50:51

字體：大中小

來源：轉載

供稿：網友

Inline-block是元素display屬性的一個值。這個名字的由來是因為，可以簡單的解釋為inline+block ；display設置這個值的元素，兼具行內元素（ inline elements）跟塊級元素（block elements）的特征。塊級元素（block elements）來源于CSS盒子模型。塊級元素包含width height,padding,border與margin，他們的排列方式是從上到下排列。行內元素（inline elements）排列方式是水平排列。行內塊元素（inline-block elements）在內部他的表現類似block元素，比如他擁有block元素的width height,padding,border與margin，而外部的排列方式有類似行內元素，即水平排列，而不是像塊級元素一樣從上到下排列。因此inline-block元素跟元素設置浮動后的表現差別并不是很大。對盒子設置浮動后，同樣會水平排列。雖然他們實現的原理不同，但內部表現為塊級元素，水平排列這種需求，浮動跟inline-block都適合實現。

如何從兩者之間進行選擇取決于你的設計稿跟解決方法。如果你需要文字環繞容器，那浮動是不二選擇。因為浮動元素會脫離文檔流，并使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內；如果你需要居中對齊元素，inline-block是個好選擇，很明顯你不能通過給父元素設置text-align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。但是父元素內元素如果設置了display：inline-block，則對父元素設置一些定位屬性會影響到子元素。

使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block。
使用浮動：當你需要讓元素環繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

對于圖片列表來說。若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是因為浮動后，圖片脫離了文檔流。而inline-block由于未脫離文檔流，不會出現這個問題。如果你想再創建一列圖片時，不會受到上一列圖片inline:block的影響，因此也不需要清除浮動。而你在使用附送時則需要時刻注意清除浮動，當內容不斷變化時這很容易產生bug。

對比如下：