單列布局長這個樣子，主要有兩種：普通單欄，通欄的單欄布局
比較簡單，設定 定寬 + 水平居中即可
頭部
內容尾部
瀏覽器寬度超過960px時，外margin出現。
當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。
執行結果鏈結描述
在header 和footer上再包裹一層div，在外層的div上新增背景顏色，設定內層layout上設定左右margin：auto，就出現了通欄的效果。實際上layout佔據的位置是固定的，如下圖border框出的位置。
當瀏覽器寬度收縮的時候，也會出現滾動條。
一列固定寬度，另外一列自適應寬度。通過float+margin實現
執行結果鏈結描述
1、最重要布局的時候浮動元素要放在前面，要先放aside，再寫content。因為content是普通的塊級元素，如果先執行content，就會佔據一整行，aside就只能向下浮動。
如果先執行aside，由於有左margin，就正好可以放的下
2、注意使用後清除浮動
兩側兩列固定寬度，中間列自適應寬度。通過設定aside 左右float+左右margin實現
執行結果鏈結描述
左右沒有margin
關於flex這三篇文章，寫得比較好
flex 布局教程：例項篇
flex 布局教程：語法篇
深入理解 flex-grow & flex-shrink & flex-basis
三列布局中，一般兩邊是廣告，中間是實際內容。要求中間內容元素在 dom 元素次序中處於優先位置。所以普通的三欄布局就用不了，必須要用更複雜的方式來實現。
設定負margin和width為百分比，計算的基數都是父元素的寬度
負margin使用較難掌握，使用前可以看一下這篇負margin的原理的文章
main
aside
extra
demo
原理：雙飛翼的布局和聖杯是很相似的，不同的是雙飛翼在main內部再巢狀了一層wrap。用wrap設定左右margin，代替content設定padding和絕對定位。
main
aside
extra
CSS 常用布局
1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...
css常用布局
以下居中布局均以不定寬為前提，定寬情況包含其中 1 水平居中 a inline block text align tips 此方案相容性較好，可相容至ie8，對於ie567並不支援inline block，需要使用css hack進行相容 b table margin tips 此方案相容至ie8，...
CSS 常用布局
div class body div class header div div class section div class left div div class right div div div class footer div div 整個父元素相對定位，導航高固定，內容區域絕對定位，通過定...