|
CSS文檔流與塊級元素（block）、內(nèi)聯(lián)元素（inline），之前翻閱不少書籍,看過不少文章, 看到所多的是零碎的CSS布局基本知識,比較表面.看過O'Reilly的<CSS權(quán)威指南>,發(fā)現(xiàn)里面提到的文檔流概念讓我很敏感. 可惡的是書中并沒有解釋文檔流是什么東西,或許作者覺得這個太簡單了以至于不值一提.但我覺得,這個概念實在太重要了.理解了它,一堆CSS布局的理論都 變得易于理解,并且體會到CSS這套設(shè)計的合理性所在. 于是我根據(jù)猜測,再加實驗,得出一下說法.如有錯誤,純屬正常.
文檔流
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流.
每個非浮動塊級元素都獨占一行, 浮動元素則按規(guī)定浮在行的一端. 若當前行容不下, 則另起新行再浮動.
內(nèi)聯(lián)元素也不會獨占一行. 幾乎所有元素(包括塊級,內(nèi)聯(lián)和列表元素)均可生成子行, 用于擺放子元素.
有三種情況將使得元素脫離文檔流而存在,分別是浮動,絕對定位, 固定定位. 但是在IE中浮動元素也存在于文檔流中(還讓我覺得這樣很合理><).
浮動元素不占任何正常文檔流空間，而浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側(cè)或者右側(cè)。文字內(nèi)容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。
浮動概念讓人迷惑根源在于瀏覽器對理論的解讀造成的。只能說很多人以IE做標準，其實它不是。
基于文檔流, 我們可以很容易理解以下的定位模式:
- 相對定位,
即相對于元素在文檔流中位置進行偏移. 但保留原占位.
- 絕對定位,
即完全脫離文檔流, 相對于position屬性非static值的最近父級元素進行偏移
- 固定定位,
即完全脫離文檔流, 相對于視區(qū)進行偏移.
接下來還有幾個問題我搞不明白的
- 作為三大基本元素之一的內(nèi)聯(lián)元素, 它跟塊級元素的主要區(qū)別在哪?
- Clear屬性取right值時怎么理解? 貌似實驗情況總跟理論不符.
出處：相關(guān)論壇
責任編輯：bluehearts
上一頁 下一頁 CSS文檔流與塊級元素和內(nèi)聯(lián)元素 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 CSS文檔流與塊級元素和內(nèi)聯(lián)元素 [1]
第 2 頁 
