資訊專欄INFORMATION COLUMN
摘要：后來終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純設置效果與采用是一樣的魔法堂就這個樣，而浮動定位也是基于。相對定位的最強武器就是個屬性了，好明顯它們默認值均是。
前言
?剛接觸CSS時經常聽到看到一個詞"文檔流"，那到底什么是"文檔流"呢？然后會看到"絕對定位和浮動定位能脫離文檔流"，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標準文檔找到關于Absolute positioning和Float的內容，卻怎么也找不到Document flow(文檔流)的資料。后來終于知道是某位大神將Normal flow翻譯為文檔流而已。。。。。。而我更偏好它的直譯"常規流"，或直接引用英文名詞就好了。
Normal flow到底啥意思啊？?首先我們從名稱入手，Normal flow直譯為"常規流"，我們可以猜想它有以下幾個特點：
作為默認的定位模式;
其他定位模式均以其為基礎。
?各位都知道與定位系統的CSS屬性position:static|relative|absolute|fixed和float:none|left|right，其中position的默認值是static，而float的默認值為none。而position:static|relative均屬于Normal flow。
?另外單純設置position:absolute效果與采用Normal flow是一樣的（《CSS魔法堂：Absolute Positioning就這個樣》），而浮動定位也是基于Normal flow。所以我認為"脫離常規流"這一說法不完全正確，甚至讓人產生誤解
?對Normal flow的地位與和其余定位模式的關系有初步認知后，必須是迫不及待地想深入它的特性和行為特征了！這就回到那個耳熟能詳的的IFC和BFC了。具體請參考CSS魔法堂：重新認識Box Model、IFC、BFC和Collapsing margins
?對于IFC和BFC已經有很多資料圍繞它們來展開，而且我們也投入很多精力去理解它倆，但往往會忽略一個前提，那就是沒有Normal flow就沒有IFC、BFC。當我們采用絕對定位或浮動定位時，就沒有必要再討論IFC和BFC了。那么說絕對定位和浮動定位會讓元素產生新的BFC又是怎么說呢？
?我是這樣理解的。首先絕對定位和浮動定位必須產生新的BFC，就想根元素會產生默認的BFC那樣，供采用常規流的塊級子孫盒子使用。但像Collapsing margins這種由BFC引起的行為特征，由于盒子本身不再受原來BFC的影響，自然就不會出現Collapsing margins了。
其實我有個疑問：那就是為什么一個文檔可以有多個BFC，卻只有一個IFC呢？
我想大家都試過采用這種方式實現水平居中(IE5.5下無效)
hello world:)
?參與BFC的盒子獨占一行，我想大家應該沒有異議了，但具體是如何獨占法呢？看等式吧!
"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = width of containing block
其中margin-left/width/margin-right可為auto，且具有以下規則：
若width為auto，則其他設置為auto的屬性的實際值為0，并讓width的實際值滿足等式；
若width為數值，而margin-left/right均為auto，且除marin-left/right外其他屬性值總和小于containing block的寬度，那么margin-left == margin-right == ("border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width")/2；否則margin-left == margin-right == 0.
Normal flow的小弟——Relative positioning?我們可以以Normal flow或Float定位模式作為基礎之上再疊加一個相對定位，從而實現更靈活的定位操作。
?相對定位的最強武器就是top/right/bottom/left4個屬性了，好明顯它們默認值均是auto。另外所謂基于Normal flow或Float定位模式的相對定位，自然就是以Normal flow或Float定位模式下margin box的4條邊作為參考系了。
接下來只要掌握以下規則，就可以運用自如了：
left/right均為auto，則實際值為0;
left/right其中一個為數值，則兩者等式left == -right;
left/right均為數值，則根據direction值。若direction為ltr，則left值保留，而right = -left；若direction為rtl，則right值保留，而left = -right。
(top/bottom規則同上)
注意：
疊加相對定位后的盒子不會影響其他盒子的排版，只是會發生重疊的效果而已;
若相對定位后的盒子超出所屬containing block的范圍，且overflow:auto|scroll;則會導致出現滾動條的情況，從而影響其他盒子的排版。
總結A
若有紕漏，請各位指正
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/536...肥子John
Relative positioning
Visual formatting model details
KB010: 常規流( Normal flow )
KB009: CSS 定位體系概述
http://www.css88.com/book/css/properties...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115181.html
摘要：魔法堂重新認識和魔法堂你一定誤解過的魔法堂就這個樣魔法堂說說那個被埋沒的志向深入細節后會發現中定位模式之間，和之間存在千絲萬縷的關系，必須以俯瞰的角度捋一下。當采用時，屬性的實際值會被重置為。由于和則需要通過來引入來提供盒子定位微調的功能。 前言 ?對于Box Model和Positioning Scheme中3種定位模式的細節，已經通過以下幾篇文章記錄了我對其的理解和思考。?《CSS...
摘要：時其寬度始終保持占滿寬度的態度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試理清Float的特性和行為特征，若有紕漏望各位指正...
摘要：注意會生成新的，因此不會出現效果。圖中藍色線框，位于內，作為間的分隔線。不可否認求學之路的艱辛苦悶。如此的努力，為了僅僅是能在大學逍遙快活一番這動機實在讓人心寒，也正因如此造就了大學生的墮落。人類文明進步最有力的證明。 前言 ?是否記得《讀者文摘》中那一篇篇優美感人的文章呢？那除了文章內容外，還記得那報刊、雜志獨有的多欄布局嗎？?當我們希望將報刊、雜志中的閱讀體驗遷移到網頁上時，最簡單...
摘要：更多關于的信息可參考魔法堂不得不說的因此的實際值則是相對于而言，我們可以通過來獲取和的實際值。對于由于自身有固有的，因此當設置時，其實際值就是元素固有的。結果就是除均不為，而為時，會自動計算以滿足等式。兩條不滿足外，其他情況均一致。 前言 當我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過left和top屬性值即可讓元素得以無限的自由時，卻...
摘要：與的映射關系為。與根對應的對應的層疊上下文，是其他的祖先，的范圍覆蓋整條。注意的默認值為，自動賦值為。對于，它會將賦予給對應的，而則不會。 一、前言 ?假如只是開發簡單的彈窗效果，懂得通過z-index來調整元素間的層疊關系就夠了。但要將多個彈窗間層疊關系給處理好，那么充分理解z-index背后的原理及兼容性問題就是必要的知識...
閱讀 1885·2021-11-12 10:36
閱讀 2319·2021-09-01 10:29
閱讀 2353·2019-08-30 15:56
閱讀 1024·2019-08-30 12:56
閱讀 2355·2019-08-26 13:58
閱讀 2272·2019-08-23 18:38
閱讀 1494·2019-08-23 18:32
閱讀 2109·2019-08-23 16:53
