1. CSS Reset
瀏覽器對標(biāo)簽進行樣式設(shè)置嗡善，不同瀏覽器默認(rèn)樣式有差異
CSS Reset 全局定義樣式瞻讽，通過標(biāo)簽設(shè)置樣式把默認(rèn)樣式覆蓋仑撞。
注意事項：在項目初期把 Reset 定好月杉，引入時在第一位。
CSS Reset 沒有標(biāo)準(zhǔn)答案蚂蕴，不同產(chǎn)品需求不同。
2.布局解決方案
居中布局
水平居中
(1)inline-block + text-align
塊級元素默認(rèn)寬度會撐滿父元素俯邓，inline-block 寬度根據(jù)內(nèi)容決定骡楼。
text-align 對 inline 元素起作用
優(yōu)點：兼容性好
inline-block IE6，7 不支持稽鞭，通過 display:inline 和 zoom:1 實現(xiàn)
缺點：text-align 會被子元素繼承鸟整，文字居中
(2) table + margin
display:table 寬度由內(nèi)容決定，類似 block朦蕴，IE8 以上支持
優(yōu)點：只設(shè)置了子元素篮条，不關(guān)心父元素樣式。IE6吩抓，7 可把結(jié)構(gòu)換為 table 的結(jié)構(gòu)
(3) absolute + transform
position:absolute 絕對定位脫離文檔流兑燥，寬度由內(nèi)容決定
translateX 中百分比參照物為自身寬度
優(yōu)點：不對其他元素產(chǎn)生影響
缺點：transform 為 CSS3 新屬性，兼容性較差
(4) flex + justify-content
display:flex; 子元素（flex-item）寬度為內(nèi)容寬度
優(yōu)點：只需設(shè)置父元素
缺點：IE6,7,8 不支持 flex
垂直居中
(1) table-cell + vertical-align
display:table-cell; 將元素變?yōu)閱卧袂倥。嫒?IE8 及以上
vertical-align 作用在 inline降瞳，inline-block 以及 table-cell 元素
優(yōu)點：兼容性較好，可把結(jié)構(gòu)換為 table 以兼容 IE6蚓胸，7
(2) absolute + transform
優(yōu)點：子元素不干擾其他元素
缺點：transform 為 CSS3 新增屬性挣饥，不同瀏覽器需要加上不同的私有前綴
(3) flex + align-items
父元素設(shè)置 display:flex ，align-items 默認(rèn)值為 stretch沛膳，子元素被拉伸扔枫，高度撐滿容器
優(yōu)點：只需給 parent 設(shè)置樣式
缺點：flex 兼容性問題
居中
(1) inline-block + text-align + table-cell + vertical-align
優(yōu)點：兼容性較好
display:table-cell 在低版本瀏覽器可以把結(jié)構(gòu)改為 table
(2) absolute + transform
優(yōu)點：不影響其他元素
缺點：transform 兼容問題
(3) flex + justify-content + align-items
優(yōu)點：只設(shè)置父元素?，不需要設(shè)置子元素
缺點：兼容性問題
多列布局
定寬與自適應(yīng)
(1) float + margin
float 對元素脫離文檔流锹安，對內(nèi)容不脫離文檔流（文字環(huán)繞）
right 中 margin-left 為 left 的寬度短荐，可在此基礎(chǔ)上加上間距。
優(yōu)點：容易理解
缺點：兼容性叹哭，IE6 right 中文字會縮進 3像素忍宋；在 right 上第一個元素設(shè)置 clear:both 會清除浮動導(dǎo)致移至下一行。
(2) float + margin + (fix) 改進方案风罩，增加 right-fix?
left糠排，right 均為浮動元素，不存在像素問題超升，子元素清除浮動也不影響
right-fix 寬度設(shè)為 100%入宦，會掉至下一行哺徊，margin-left 為 -100px 空出 100 像素，回到上一行蓋住 left乾闰。在 right 上再設(shè)置 margin-left 露出 left落追。
在上面操作之后，right-fix z 軸上層級比 left 高涯肩，無法選中 left 中的文字轿钠。通過 position:relative; 提高 left 在 z 軸上的層級。
優(yōu)點：兼容性好
缺點：多一個結(jié)構(gòu)宽菜，樣式較多
(3) float + overflow
overflow:hidden; 觸發(fā) BFC 模式（Block Formatting Context 塊級格式化文本）
BFC 模式下容器中的內(nèi)容與外界隔離谣膳，外界（如浮動元素）不影響容器中內(nèi)容，間距設(shè)置在 left 上铅乡。
優(yōu)點：只需設(shè)置 left 和 right 继谚，right 只需設(shè)置 overflow:hidden;
缺點：IE6 不支持
(4) table
parent 設(shè)置 display:table; 后寬度默認(rèn)為內(nèi)容寬度；設(shè)置 table-layout:fixed; 固定表格布局阵幸，寬度與內(nèi)容無關(guān)
left花履，right 設(shè)置 display:table-cell; 變?yōu)閱卧瘢脚帕小?/p>
table 特性：兩列寬度和一定等于整個表格寬度挚赊，不能設(shè)置margin诡壁，可以設(shè)置padding；right 為剩余寬度
table-layout:fixed; 的兩個好處：加速 table 的渲染荠割；實現(xiàn)了布局優(yōu)點
(5) flex
display:flex; 子元素默認(rèn)寬度為內(nèi)容寬度
flex:1; 等價于 flex:1 1 0; 剩余空間都給 right
缺點：兼容性問題妹卿，適用于小范圍布局
(6)兩列定寬與自適應(yīng)
不定寬與自適應(yīng)（寬度由內(nèi)容決定）
float + margin 無法實現(xiàn)，left 中的 width 和 right 中的 margin-left 強耦合
(1) float + overflow
IE6 不兼容
實現(xiàn)簡單蔑鹦，代碼量少
(2) table
display:table; IE6夺克，7 無法實現(xiàn)
width:0.1%; 如果設(shè)為 1px ，IE8 兼容有問題
(3) flex
(4)兩列不定寬 + 自適應(yīng)
等分（每一列寬度相同嚎朽，間距相同）
(1) float
實現(xiàn)條件：父容器增加一個間隔的寬度铺纽，每一列寬度需要包含間隔寬度
margin-left:-20px; 增加 20px 間距
box-sizing 設(shè)置 width 和 height 指定哪個區(qū)域的寬高，默認(rèn)為 content-box
box-sizing:border-box; 讓設(shè)置的寬度包含 padding 區(qū)域
總寬度增加了 20px哟忍，每一列都是 25% 寬度狡门，并且間距包含在 25% 里面
優(yōu)點：兼容性較好，IE8 以上完全兼容锅很，IE6其馏，7對于百分比，浮點數(shù)四舍五入兼容性不太好
存在一個問題：列數(shù)發(fā)生變化時粗蔚，結(jié)構(gòu)和樣式耦合尝偎，需要修改樣式 width
(2) table
每一列間的間距在 table 模式下無法用 margin，只能用 padding
table 的特性為寬度默認(rèn)為內(nèi)容寬度鹏控，需要設(shè)置寬度為 100%致扯，無法加上間隔寬度
解決方案：在 parent 外加一層 parent-fix
把增加 20px 功能轉(zhuǎn)到 parent-fix（設(shè)置之前 body 需要設(shè)置 margin：20px），令 parent 多出 20px
table-layout:fixed; 功能：使布局優(yōu)先当辐；假如單元格未設(shè)置寬度抖僵，單元格寬度平分，每一列不需要設(shè)置 25%缘揪，結(jié)構(gòu)與樣式解耦
缺點是多了一層
(3) flex
flex:1 分配剩余空間
.column+.column 為相鄰兄弟選擇器耍群，只選擇與 column 緊鄰的后面的 column
HTML 和 ?CSS 解耦
缺點：兼容性問題
等高
(1) table
background-clip 裁剪背景圖，默認(rèn)為 border-box
(2) flex
flex item 默認(rèn)輔軸上對齊方式（align-items）為 stretch （拉伸）
(3) float
float 沒有任何特性可以做到完全等高
令 left 和 right 背景顏色高度相同（偽等高）找筝；padding-box 可承載背景顏色
padding-bottom:9999px; 背景變高蹈垢，顏色到底，content-box 仍為原來高度
margin-bottom：-9999px; 抵消 padding
parent 中的 overflow:hidden; 把原先加上的 padding-bottom 截掉袖裕，截到兩列內(nèi)容較高的高度曹抬。
兼容性較好，偽等高
全屏布局
全屏布局特點：布局充滿瀏覽器窗口急鳄；滾動條僅出現(xiàn)在內(nèi)容區(qū)域
實現(xiàn)方案：Position谤民；Flex
Position
絕對定位
IE6 下支持度不是很好
Flex
先從上到下劃分區(qū)域，實現(xiàn) flex疾宏，再關(guān)注側(cè)欄和主欄
若需要實現(xiàn)百分比的布局张足，把原本定值的地方改成百分比即可
Flex兼容性：IE9 及以下
內(nèi)容自適應(yīng) Flex
3.響應(yīng)式
響應(yīng)式布局簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本坎藐。
優(yōu)點：網(wǎng)站可以自動適配到不同的設(shè)備为牍，開發(fā)成本低
缺點：有可能會導(dǎo)致資源冗余，加載之后隱藏
viewport
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中岩馍，通常這個虛擬的窗口比屏幕寬碉咆，通過某一種比例等比縮小到屏幕的顯示區(qū)域
通過改變 viewport ，防止出現(xiàn)縮小的情況
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
width=device-width 把 viewport 寬度設(shè)成設(shè)備寬度兼雄，不同移動設(shè)備 device-width 不同吟逝， ? ? ? ? ? device-width 是設(shè)備推薦的一個比較恰當(dāng)?shù)闹?br>
initial-scale=1.0 把初始縮放設(shè)為 1.0 ，網(wǎng)站不會被縮放
user-scalable=no 防止用戶手動縮放
一般情況下赦肋，如果采用了響應(yīng)式實現(xiàn)方式块攒，不需要用戶手動縮放，通常情況下佃乘，都會加上這樣的 viewport 設(shè)置
在做 CSS 布局時囱井，盡可能少用定寬模式，應(yīng)該用自適應(yīng)模式
@media 媒體查詢
當(dāng)滿足條件時趣避，CSS 起作用
通過最小寬度或最大寬度的值設(shè)置庞呕，讓屏幕應(yīng)用某一樣式
例子
當(dāng)窗口變小為 320px 一下時，左右排列變?yōu)樯舷屡帕?/p>
