資訊專欄INFORMATION COLUMN
摘要：當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間基于文檔流，理解定位模式相對定位，即相對于元素在文檔流中位置進行偏移。絕對定位，即完全脫離文檔流，相對于屬性非值的最近父級元素進行偏移。
主要參考文檔：
http://www.zhangxinxu.com/wor...
https://www.cnblogs.com/dojo-...
測試例子：
https://codepen.io/icyfanfan/...
https://codepen.io/icyfanfan/...
理解文檔流對于理解CSS布局其他相關(guān)概念很重要！！
文檔流將窗體自上而下劃分為一行一行，在每行中從左至右排放元素，即為文檔流
每個非浮動塊級元素獨占一行，浮動元素按規(guī)定(left or right)浮在行的一端，若當前行放不下，則起新行再浮動
內(nèi)聯(lián)元素不會獨占一行，幾乎所有元素(內(nèi)聯(lián)、塊級等)都可以生成子行以擺放子元素
有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位， 固定定位。 但是在IE中浮動元素也存在于文檔流中
浮動元素不占任何正常文檔流空間，而浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側(cè)或者右側(cè)。文字內(nèi)容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間
基于文檔流，理解定位模式：
相對定位， 即相對于元素在文檔流中位置進行偏移。 但保留原占位。
絕對定位， 即完全脫離文檔流， 相對于position屬性非static值的最近父級元素進行偏移。
固定定位， 即完全脫離文檔流， 相對于視區(qū)進行偏移
標簽：div
特點：
一個元素占一行
可設(shè)置寬度、高度、行高、邊框、內(nèi)外邊距
未設(shè)置寬度的情況下，寬度自動填滿外部容器
內(nèi)部可以容納其他塊級元素或者內(nèi)聯(lián)元素
塊狀元素的流體特性
塊狀水平元素，如div元素，在默認情況下（未定義寬度、非浮動絕對定位等），水平方向會自動填滿外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實際內(nèi)容區(qū)域會響應(yīng)變窄。
標簽：span
特點：
和其他內(nèi)聯(lián)特性元素在同一行上，行布局表現(xiàn)形式
不可設(shè)置寬度、高度、內(nèi)外邊距
寬度由內(nèi)部元素決定，可以設(shè)置邊框，但邊框的表現(xiàn)是每一行都會被設(shè)置（對比塊級元素）
內(nèi)部可以容納文本或其他內(nèi)聯(lián)元素
內(nèi)聯(lián)塊級display: inline-block
特點：
將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。和其他內(nèi)聯(lián)對象同一行顯示
和塊級元素一樣可以設(shè)置寬高、內(nèi)外邊距等
內(nèi)部可以容納
Formatting Context：指頁面中的一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。
BFC-BLOCK FORMATTING CONTEXT 塊級格式化上下文BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素 - 所以，避免margin穿透啊，清除浮動什么的也好理解了 - from 張鑫旭blog原話
理解：一個獨立的塊級渲染區(qū)域，只有Block-level box參與，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局，內(nèi)部布局不會受外部影響也不會對外部產(chǎn)生影響
如何產(chǎn)生BFC：
float的值不為none
overflow的值不為auto, scroll或hidden
display的值為table-cell, table-caption或inline-block
（測試時發(fā)現(xiàn)display:table也會有觸發(fā)bfc，table會默認生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC）
position的值不為relative或static
BFC規(guī)則
生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級元素外邊距會折疊。
生成BFC元素的子元素中，每一個子元素做外邊距與包含塊的左邊界相接觸，（對于從右到左的格式化，右外邊距接觸右邊界），即使浮動元素也是如此（盡管子元素的內(nèi)容區(qū)域會由于浮動而壓縮），除非這個子元素也創(chuàng)建了一個新的BFC（如它自身也是一個浮動元素）。
分析：
內(nèi)部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。（完整的說法是：屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊，與方向無關(guān)。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
BFC的區(qū)域不會與float的元素區(qū)域重疊
計算BFC的高度時，浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然
借此回憶一下之前學(xué)習(xí)過的一些布局知識
垂直方向上，兩個相鄰div margin重疊：其實是在同一個bfc環(huán)境中
設(shè)置父元素overflow:hidden或浮動父元素能清除浮動影響：其實就是使父元素觸發(fā)bfc，讓子元素參與父元素的高度計算
BFC應(yīng)用
防止margin重疊：將發(fā)生重疊的元素放到兩個BFC中（或者使其中一個產(chǎn)生BFC）
清除浮動：略
布局：利用BFC區(qū)域不會與float元素區(qū)域重疊的特性，便于實現(xiàn)多欄布局
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115884.html
摘要：是目前可用框架中無可爭議的領(lǐng)導(dǎo)者。框架大小預(yù)處理器和響應(yīng)式布局是模塊化是啟動模板布局是圖標集設(shè)置附加附件無捆綁，許多第三方插件可用。是排在第二名的框架。是一個語義化設(shè)計的前端開源框架。 如今出現(xiàn)了大量的CSS前端框架，但真正優(yōu)秀的框架只有少數(shù)幾個。 本文將會比較其中五個最佳的框架。每個框架都有自己的優(yōu)點和缺點，以及具體的應(yīng)用領(lǐng)域，你可以根據(jù)自己的具體項目需求進行選擇。此外，許多選項都是...
摘要：標準盒模型盒子總寬度高度。以上支持，除此外還可以取到相對于視窗的上下左右的距離。包括高度寬度內(nèi)邊距和邊框，不包括外邊距。主要看怎么父元素的盒模型如何設(shè)置。空元素的邊距重疊是取與的最大值。 一、概念 CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、實際內(nèi)容（content）四個屬性。CSS盒模型：標準模...
閱讀 1408·2023-04-26 03:04
閱讀 2356·2019-08-30 15:44
閱讀 3733·2019-08-30 14:15
閱讀 3532·2019-08-27 10:56
閱讀 2751·2019-08-26 13:53
閱讀 2621·2019-08-26 13:26
閱讀 3085·2019-08-26 12:11
閱讀 3615·2019-08-23 18:21
