CSS——inline-block属性
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。
對比如下:
上圖,把一系列元素設置了浮動,因為盒子二號寬度的關系,可以發現盒子五號被擠進去了(這些元素都脫離了文檔流),這是圖片排列中很常見的問題。
上面的塊級元素被設置了inline-block。由于他們沒有脫離文檔流,所以元素不會被某個過長的列擠上來。
總結
以上是生活随笔為你收集整理的CSS——inline-block属性的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HMM——前向算法与后向算法
- 下一篇: HMM——前向后向算法