web頁面的布局，常見的主要有「浮動布局（float）」、「定位布局（position）」、「行內塊布局（inline-block）」、「css3的多欄布局（columns）」、「伸縮布局（flexbox）」以及「網格布局（grids）」等。
ifc簡介：行級格式化上下文inline formatting context
ifc布局規則：
①在乙個行內格式化上下文中，盒是乙個接乙個水平放置
②這些盒之間的水平margin，border和padding都有效
③盒可能以不同的方式豎直對齊：以它們的底部或者頂部對齊，或者以它們裡面的文字的基線對齊
④行內塊級元素之間預設留有間隙
⑤矩形區域包含著來自一行的盒子叫做line box，line box的寬度由浮動情況和它的包含塊決定，高度由line-height的計算結果決定
ffc全稱：flexible formatting context彈性盒格式化上下文
【簡介】
css3引入了一種新的布局模型——flex布局。
flex是flexible box的縮寫，一般稱之為彈性盒模型。和css3其他屬性不一樣，flexbox並不是乙個屬性，而是乙個模組，包括多個css3屬性。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕，使用flex box布局實際上就是宣告建立了ffc(自適應格式上下文)
gfc全稱：grids formatting context網格格式化上下文
【簡介】
css3引入的一種新的布局模型——grids網格布局，目前暫未推廣使用，使用頻率較低，簡單了解即可。
grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。
flex 布局是軸線布局，只能指定"專案"針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。
【場景】
在布局時候，較早時經常會使用浮動，使用浮動元素會脫離文件流，那文件流到底是什麼東西呢？
"流"是render tree（渲染樹）在布局時的乙個概念。
【渲染規則】
流實際上規定了元素怎麼排放以及相互作用（之前講的渲染規則）。
在css中主要有三種流： normal flow（普通流，我們經常將的脫離，脫離的就是它）、floats浮動流、absolute positioning定位流（position不為static、relative）。
將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。
需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。而對於使用absolute positioning脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。
（1）bfc為塊級格式化上下文
（2）ifc為行級格式化上下文
（3）gfc和ffc為css3新布局屬性
靜態補充CSS型別轉換
常用的塊級block標籤 標題標籤 水平分割線 段落無序列表 有序列表 定義列表 表單 布局標籤 行內元素特性 塊級元素特性 1.總是從新的一行開始 2.高度 寬度都是可控的 3.寬度沒有設定時，預設為100 4.塊級元素可以包含塊級元素和行內元素 特殊 文字類的塊級元素不能放塊元素，例如 常用的內...
CSS3騷樣式補充
設定旋轉元素的基點位置，2d 轉換元素能夠改變元素 x 和 y 軸，3d 轉換元素還能改變其 z 軸。必須與 transform 屬性一同使用，不然不會有任何效果。定義檢視被置於 x 軸的何處。可能的值 定義檢視被置於 y 軸的何處。可能的值 定義檢視被置於 z 軸的何處。可能的值 注 length...
靜態補充CSS型別轉換與JS深拷貝與淺拷貝
常用的塊級元素 常用的塊級block標籤 標題標籤 水平分割線 段落無序列表 有序列表 定義列表 表單 布局標籤 塊級元素特性 常用的內聯 行內inline標籤 鏈結 換行 空標籤，不深究 加粗 傾斜 下劃線 刪除線等文字裝飾標籤 下拉列表 行內元素特性 常用的行內塊級inline block標籤 ...