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