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