關於inline block和float的對比

2021-09-17 02:27:33 字數 615 閱讀 2111

當把元素的display屬性設定為inline-block時可以是元素變成行級元素(前後不換行)但是還可以設定一些塊級元素的屬性,從而實現元素的並列。

當然將元素設為浮動也可以實現元素的並列

文件流:inline-block不會脫離文件流,仍然在文件裡佔據正常的位置,但是float的元素會脫離文件流

水平位置:不能設定父元素的text-align是浮動元素居中,事實上,在在父元素上設定此類效果在浮動元素上均無效(脫離文件流),但是inline-block的元素可以被設定為水平居中

垂直對齊:inline元素沿著基線對齊,可以通過vertical屬性設定基線,浮動元素眼頂部對齊,注意:當inline元素內部有元素時,其基線會發生變化,對齊會錯亂,依然可以通過設定vertical屬性恢復

空白:內聯元素會將換行看成是空白節點,因此元素之間會出現間隔解決方式

對其他元素的影響:inline-block對其他元素基本無特殊影響,float元素會出現環繞(float元素雖然脫離了文件流,但是會佔據父元素和相鄰元素的內容空間)

關於inline block的使用

在手機端移動網頁開發中我不喜歡使用浮動布局,所以使用一些其他的,比如inline block 問題 在inline block使用過程中發現,長度有時候總是不受控制,比如70 30 100 而自動換行的問題。解決 發現兩個inline block之間如果有留白,則就會出現上面的問題,解決辦法一 標籤...

關於inline block的相容測試

首先說下inline block inline block的區別 inline 行內元素顯示前後無換行符 block 塊級元素 inline block 行內塊元素 重點說下inline block這個屬性。經過測試當display inline block的時候,本身為塊元素的html標籤 比如 ...

解決關於inline block元素換行問題

昨天群裡有人問個問題 為什麼button加了文字後,產生了對齊不一致的問題。原因在於baseline的對齊問題。其中裡面最後乙個例子講到了如何解決inline元素換行的問題。裡面說用注釋可以解決換行問題,我測試了下發現和注釋完全沒有關係。換行的原因在於div與div換行製表符產生的空隙,所以要避免換...