由全球資訊網聯盟制定的一系列標準，包括：
在css中存在三種定位機制：
標準文件流特點
塊級元素特點
行級元素特點
注意：塊級元素和行級元素都是盒子模型
盒子模型—網頁布局的基石,由4部分組成
盒子模型的三維立體結構
盒子模型尺寸
盒子模型尺寸=邊框+外邊距+內邊距+盒子中的內容尺寸
注意：
區別在於內容的寬度是否包含border和padding，可通過設定box-sizing:border-box(內容寬度包含border和padding值)來實現統一
最初網頁出現時使用，div布局出現後廢棄
兩欄布局：一欄定寬，一欄自適應。這樣子做的好處是定寬的那一欄可以做廣告，自適應的可以作為內容主體。
實現方式
定寬
自適應 .left
.right
特點：兩邊定寬，然後中間的width是auto的，可以自適應內容，再加上margin邊距，來進行設定。
float 實現三欄布局
使用左右兩欄使用float屬性，中間欄使用margin屬性進行撐開，注意的是html的結構
左欄
右欄中間欄
.left
.right
.middle
缺點：
position 定位實現
左右兩欄使用position進行定位，中間欄使用margin進行定位
左欄
中間欄右欄
.left
.middle
.right
缺點：當父元素有內外邊距時，會導致中間欄的位置出現偏差
float和bfc配合聖杯布局
將middle的寬度設定為100%，然後將其float設定為left，其中的main塊設定margin屬性，然後左邊欄設定float為left，之後設定margin為-100%，右欄也設定為float：left，之後margin-left為自身大小。
左欄右欄
overflow: hidden; //清除浮動
}.middle
.middle .main
.left
.right
如下圖：
缺點：
flex 布局
中間右欄
display: flex;
}.left
.middle
.right
如下圖：
缺點：相容性問題
參考文章：
CSS布局方式
浮動布局 絕對定位布局 固定定位fixed 絕對定位absolute 實現橫向兩列布局 能夠實現橫向多列布局 常見的布局有以下幾種 單列水平居中布局,一列定寬一列自適應布局,兩列定寬一列自適應布局,兩側定寬中間自適應三列布局。重點介紹一下常見的三列布局之 聖杯布局和雙飛翼布局。兩者都屬於三列布局，是...
css 網頁布局方式
1.網頁布局方式 其實就是指瀏覽器是如何對網頁中的元素進行排版的。1 標準流 文件流 普通流 排版方式 2 在css中將元素分為三種，分別是 塊級元素 行內元素 行內塊級元素 3 在標準流中有兩種排版方式，一種是垂直排序，一種是水平排序 垂直排序 如果元素是塊級元素，那麼就會垂直排版 水平排序 如果...
CSS常見布局方式
如下 child1 child2 clearfix after給兩個子元素新增float，然後給它們的父元素新增clearfix類用於清除浮動。child1 child2 child3 設定main寬度為100 再設定兩個側欄的寬度。設定 負邊距，child2設定 負左邊距 為100 child3設...