個人博客： smile小站
歡迎各位來訪，交換友鏈
1.文檔流
正常：自上向下，自左向右
如果兩個相鄰元素都在其上設置外邊距，並且兩個外邊距接觸，則兩個外邊距中的較大者保留，較小的一個消失
2.佈局模式
在網頁中，元素有三種佈局模型：
- 流動模型（Flow） 默認的
- 浮動模型 (Float)
- 層模型（Layer）
流動模型是默認的網頁佈局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義爲浮動
層模型有三種形式：
1、相對定位(position: relative)
2、絕對定位(position: absolute)
3、固定定位(position: fixed)
常見佈局：
- 一列布局 （一般都是固定的寬高）
- 二列布局 （常用 float 實現，注意及時清除浮動）
- 三列布局 （兩側定寬中間自適應）
- 混合佈局 （在一列布局的基礎上，保留top和foot部分，將中間的main部分改造成兩列或三列布局，小的模塊可以再逐級同理劃分）
3.何爲定位？
定位允許您從正常的文檔流佈局中取出元素，並使它們具有不同的行爲，例如放在另一個元素的上面，或者始終保持在瀏覽器視窗內的同一位置。
4.定位的種類
- 靜態定位（正常佈局）static
- 相對定位（保留原位置空白，在原位置基礎上定位）relative
- 絕對定位（原位置不留白，在第一個設置 靜態定位 的元素基礎上定位）absolute
- 固定定位（相對於瀏覽器定位）fixed
- 混合定位（相對定位與固定定位的混合）sticky
定位可以使用：top bottom left right 進行調整
元素重疊可以用 z-index 設置元素的高低，只對定位元素有效
5.彈性盒子（flex）
優點:
- 在父內容裏面垂直居中一個塊內容。
- 使容器的所有子項佔用等量的可用寬度/高度，而不管有多少寬度/高度可用。
- 使多列布局中的所有列採用相同的高度，即使它們包含的內容量不同。
使用：
flex-direction 可以指定主軸方向 列(column)/行(row) 若需方向添加(-reverse)
flex-wrap 可以指定是否還行
align-items 控制 flex 項在交叉軸上的位置
justify-content 控制 flex 項在主軸上的位置
6.多列（column）
column-width 列的寬度
column-count 列數
column-gap 列的間距
column-rule 指定列的寬度，樣式和顏色
7.對齊方式
- 水平居中
- 垂直居中
- 水平垂直居中
詳情參考
8.左側固定右側自適應佈局實現方法：
- 雙 inline-block
- 雙 float
- float+margin-left
- absolute+margin-left
- float+BFC
- flex
- grid
9.聖盃佈局和雙飛翼佈局
事實上，聖盃佈局其實和雙飛翼佈局是一回事。它們實現的都是三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固佈局。它們實現的效果是一樣的，差別在於其實現的思想。
10.元素的 BFC 特性
BFC全稱”Block Formatting Context”, 中文爲“塊級格式化上下文”，它規定了內部如何佈局，與這個區域外部毫不相干。
BFC的佈局規則：
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
- 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算。
什麼時候會觸發BFC：
- float的值不爲none。
- overflow的值爲auto,scroll或hidden。
- display的值爲table-cell, table-caption, inline-block中的任何一個。
- position的值不爲relative和static。
BFC的作用：
- 利用BFC避免margin重疊。
- 自適應兩欄佈局
- 清除浮動
詳情參考