深入瞭解標準流以及脫標元素的特點

MomentYY發表於2021-12-23

深入瞭解標準流以及脫標元素的特點

1.標準流（Normal Flow）

預設情況下，元素都是按照normal flow（標準流、常規流、正常流、文件流）進行排布的。

  • 排布順序：在瀏覽器中從左到右，從上到下順序擺放；
  • 預設情況下，元素互相之間不存在層疊現象；

2.什麼情況下元素會脫標？

脫離標準流（簡稱“脫標”），那麼什麼情況下元素會脫離標準流呢？常見有以下兩種：

  • 元素設定position，並且position的值為fixed或absolute；
  • 元素新增浮動float，並且float的值不為none；

3.脫標元素的特點

  • 可以隨意設定寬高，寬高預設由內容決定。

    • 塊級元素：

      • 標準流下的展示（預設佔滿父元素的寬度）；

      • 脫標下的展示（寬高由內容撐開）；

    • 行內元素脫離標準流：

      • 標準流下的展示（預設由內容撐開，且不能設定寬高）；

      • 脫標下的展示（寬高還是由內容撐開，但是可以設定寬高）；

  • 不再受標準流的約束。

  • 不再給父元素彙報寬高資料，也就是不能將父元素撐開。

4.脫標和display有什麼關係？

根據以上脫標元素的特點，可能會有人認為脫標其實就是將元素轉換成了inline-block，因為其展示效果和設定display: inline-block;效果一致，但是其中的原因卻不是這樣。

當不同元素進行了脫標，對應會展示成display的何種屬性值？在MDN和W3C官方網站上都有進行解釋，並且提供了參考表格：

  • MDN中，以搜尋float屬性為例；

  • 在W3C官方文件中，有關於display、position和float之間的關係進行了說明；

總結：

  • 大部分元素在脫標後都會轉換成block型別。
  • 這裡可以丟擲一個疑問，block型別不是佔據父元素的寬度麼，為什麼脫標元素最終是由內容撐開的？
  • 解答：元素脫標後，已經不受標準流約束，其位置也是不侷限在父元素之內，很難說父元素是誰，且塊級（block）元素預設寬高都為auto，難以參考父元素寬度，所以最好的展示形式就是預設由內容撐開。

相關文章