常規流(Normal flow)


連我自己把float和絕對定位,都稱為脫離文檔流,想想概念又不那么清晰,於是尋找了W3C資料來理解,才發覺不應該叫文檔流。

資料

英文:https://www.w3.org/TR/CSS22/visuren.html#normal-flow

中文:http://w3help.org/zh-cn/kb/010/

PS:資料中文翻譯為常規流,我覺得直譯為普通流也行。

常規流

這個概念定義了什么東西,它決定了什么?它決定元素的布局方式,是基本的布局模式!

盒子模型

盒子模型,是DOM元素的抽象定義。盒子模型里,元素有margin、border、padding、content,分為塊元素和內聯元素兩種。

塊級元素(block)

塊級元素會一個接一個地被垂直放置,起點是包含塊的頂部。

內聯元素(inline)

內聯元素會一個接一個地水平排列,起點是包含塊的頂部。

常規流布局

將窗體自上而下分成一行一行,塊級元素從上至下、 行內元素在每行中按從左至右的依次排放元素。

PS:float、absolute是另外布局方式,position:relative屬於常規流。

總結

其實也是簡單東西,理解模糊時想復雜了。另外,即使別人將normal flow稱為文檔流,也不用去糾正。因為一個錯誤理解如果已經被大多人接受,那它也是對的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM