單欄布局
- 一欄
注意：
width //無論什么時候 寬度都是設(shè)的值的大小 頁面被縮放小于寬度時，會出現(xiàn)滾動條
max-width //最大寬度 如果頁面寬度比設(shè)的值小 則會自動變小 不會有滾動條出現(xiàn)
- 通欄（頭尾隨頁面大小一樣）
為了頭尾在拉大的時候顯示不完全吧黄，給body加個min-width 部服，值等于內(nèi)容的寬度
實現(xiàn)效果
兩欄， 三欄
多個元素居中顯示
.parent{
text-algin: center;
ver-algin: top; //高度不同拗慨，頂部對齊
}
.child{
display: inline-block;
}
或者
.parent{
margin: 0 auto;
}
- 雙列布局
一列固定寬度概作，另一列自適應(yīng)寬度
固定寬度的左浮float:left茂装， 自適應(yīng)寬度的margin-left：固定寬度的元素的寬度+間隙
父容器記得清浮動
實現(xiàn)效果
- 三列布局
兩側(cè)兩列固定寬度多望，中間列自適應(yīng)寬度
方法：兩側(cè)分別左浮确徙，右浮，中間加左右margin昌讲。父容器記得清浮動
注意渲染順序国夜，先左右兩列元素减噪，最后中間自適應(yīng)元素
實現(xiàn)效果
- 水平等距排列（九宮格）
用ul,li元素比較有語義
方法：li元素左浮短绸，margin左或右設(shè)置間隔，父容器相對于的margin方向設(shè)負值筹裕，值的大小為li元素的間隔
實現(xiàn)效果
展示
圣杯布局（缺點：中間元素寬度不能小于最小側(cè)邊元素的寬度）
同三欄布局效果醋闭，中間自適應(yīng)寬度的元素在最前面渲染
方法：
父容器加左右padding 值分別是左右側(cè)元素的寬度 + 間隙
三個元素都左浮，左側(cè)元素負margin 100%朝卒，加position:relative,left 負值 本身寬度
右側(cè)元素負margin 自身寬度证逻，加position:relative,right 負值 本身寬度
中間自適應(yīng)寬度元素寬度100%（相對于父元素）
實現(xiàn)效果
雙飛翼布局（解決圣杯布局錯亂缺點）
方法：大體和圣杯類似，但是中間自適應(yīng)元素再加一層父容器抗斤，float：left和width: 100%加在父容器上, 內(nèi)容（高度囚企，背景色等）加在自身
實現(xiàn)效果
