inline block和float應區別對待

2021-07-11 22:27:02 字數 1455 閱讀 4764

參考資料:

inline-block和float大戰已經持續了一段時間,有的人鍾愛float,整個頁面都用的是float布局,而有些人因為float之後的元素會脫離文件流,而鍾情於inline-block。今天因為在做任務,使用inline-block出現了一點小問題,為加深記憶,特寫此博文。

float

因為浮動元素是脫離文件流的,所以他們會乙個緊貼乙個的排列,沒有預設的空白存在,如下圖

正因為浮動元素是脫離文件流的,使得周圍元素環繞這個元素,所以當需要文字環繞的效果時可以用浮動來實現。並且浮動後的元素之間相互的沒有預設空白,這對於排版來說也是一件極好的事,可以從零開始,無需處理自帶的樣式,且沒有相容性問題。

但是浮動元素會打亂整個文件流,後面的元素需要清除浮動後才能按照原來的位置顯示,如果在乙個經常變化的頁面中,有時會因為沒有清除浮動而產生莫名其妙的bug。

再者,浮動元素垂直對齊方式始終為頂部對齊,水平方向也不能通過設定父元素的text-align來設定,所以這一點大家需要考慮。

inline-block

inline-block在內部表現方式上類似block元素,例如擁有block元素的width height,padding,border與margin,而在外部排列上類似於inline元素,不會像塊級元素一樣從上到下排列而是像行內元素那樣再一行內從左到右的排列。

inline-block因為具有行內元素的特性,所以可以通過設定父元素的text-align來使其水平居中。垂直方向預設是按照父元素的基線來基線(vertical-align:baseline)排列,可以通過元素自身的vertical-align來設定。

舉個小例子

當不對元素設定vertical-align時:

可以看到十分混亂

當設定了vertical-align後,事情瞬間變得不一樣了

具體的基線位置請看下圖**

還有就是inline-block中存在的空白問題。我們先來看空白產生的原因:是因為在書寫元素時存在換行符,所以存在空白。好吧,這個原因也是醉了。為了解決這個空白,簡單粗暴的我們可以在書寫元素的時候一行寫下,不過這種方法僅限於元素特別少的情況下;第二中可以設定父級元素的font-size為0,然後在使用子元素時記得重新設定font-size。

絕對定位absolute和浮動定位float的異同

absolute 生成絕對定位的元素,相對於最近一級的定位不是 static 的父元素來進行定位。fixed 老ie不支援 生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。static 預設值。沒有定位,元素出...

最短路徑 大話Dijkstra演算法和Floyd演算法

dijkstra演算法 演算法描述 1 演算法思想 設g v,e 是乙個帶權有向圖,把圖中頂點集合v分成兩組,第一組為已求出最短路徑的頂點集合 用s表示,初始時s中只有乙個源點,以後每求得一條最短路徑 就將加入到集合s中,直到全部頂點都加入到s中,演算法就結束了 第二組為其餘未確定最短路徑的頂點集合...

關於inline block和float的對比

當把元素的display屬性設定為inline block時可以是元素變成行級元素 前後不換行 但是還可以設定一些塊級元素的屬性,從而實現元素的並列。當然將元素設為浮動也可以實現元素的並列 文件流 inline block不會脫離文件流,仍然在文件裡佔據正常的位置,但是float的元素會脫離文件流 ...