1. CSS Reset
瀏覽器對標簽進行樣式設置，不同瀏覽器默認樣式有差異
CSS Reset 全局定義樣式，通過標簽設置樣式把默認樣式覆蓋。
注意事項：在項目初期把 Reset 定好，引入時在第一位。
CSS Reset 沒有標準答案，不同產品需求不同。
2.布局解決方案
居中布局
水平居中
(1)inline-block + text-align
塊級元素默認寬度會撐滿父元素，inline-block 寬度根據內容決定。
text-align 對 inline 元素起作用
優點：兼容性好
inline-block IE6，7 不支持，通過 display:inline 和 zoom:1 實現
缺點：text-align 會被子元素繼承，文字居中
(2) table + margin
display:table 寬度由內容決定，類似 block，IE8 以上支持
優點：只設置了子元素，不關心父元素樣式。IE6，7 可把結構換為 table 的結構
(3) absolute + transform
position:absolute 絕對定位脫離文檔流，寬度由內容決定
translateX 中百分比參照物為自身寬度
優點：不對其他元素產生影響
缺點：transform 為 CSS3 新屬性，兼容性較差
(4) flex + justify-content
display:flex; 子元素（flex-item）寬度為內容寬度
優點：只需設置父元素
缺點：IE6,7,8 不支持 flex
垂直居中
(1) table-cell + vertical-align
display:table-cell; 將元素變為單元格，兼容 IE8 及以上
vertical-align 作用在 inline，inline-block 以及 table-cell 元素
優點：兼容性較好，可把結構換為 table 以兼容 IE6，7
(2) absolute + transform
優點：子元素不干擾其他元素
缺點：transform 為 CSS3 新增屬性，不同瀏覽器需要加上不同的私有前綴
(3) flex + align-items
父元素設置 display:flex ，align-items 默認值為 stretch，子元素被拉伸，高度撐滿容器
優點：只需給 parent 設置樣式
缺點：flex 兼容性問題
居中
(1) inline-block + text-align + table-cell + vertical-align
優點：兼容性較好
display:table-cell 在低版本瀏覽器可以把結構改為 table
(2) absolute + transform
優點：不影響其他元素
缺點：transform 兼容問題
(3) flex + justify-content + align-items
優點：只設置父元素?，不需要設置子元素
缺點：兼容性問題
多列布局
定寬與自適應
(1) float + margin
float 對元素脫離文檔流，對內容不脫離文檔流（文字環繞）
right 中 margin-left 為 left 的寬度，可在此基礎上加上間距。
優點：容易理解
缺點：兼容性，IE6 right 中文字會縮進 3像素；在 right 上第一個元素設置 clear:both 會清除浮動導致移至下一行。
(2) float + margin + (fix) 改進方案，增加 right-fix?
left，right 均為浮動元素，不存在像素問題，子元素清除浮動也不影響
right-fix 寬度設為 100%，會掉至下一行，margin-left 為 -100px 空出 100 像素，回到上一行蓋住 left。在 right 上再設置 margin-left 露出 left。
在上面操作之后，right-fix z 軸上層級比 left 高，無法選中 left 中的文字。通過 position:relative; 提高 left 在 z 軸上的層級。
優點：兼容性好
缺點：多一個結構，樣式較多
(3) float + overflow
overflow:hidden; 觸發 BFC 模式（Block Formatting Context 塊級格式化文本）
BFC 模式下容器中的內容與外界隔離，外界（如浮動元素）不影響容器中內容，間距設置在 left 上。
優點：只需設置 left 和 right ，right 只需設置 overflow:hidden;
缺點：IE6 不支持
(4) table
parent 設置 display:table; 后寬度默認為內容寬度；設置 table-layout:fixed; 固定表格布局，寬度與內容無關
left，right 設置 display:table-cell; 變為單元格，水平排列。
table 特性：兩列寬度和一定等于整個表格寬度，不能設置margin，可以設置padding；right 為剩余寬度
table-layout:fixed; 的兩個好處：加速 table 的渲染；實現了布局優點
(5) flex
display:flex; 子元素默認寬度為內容寬度
flex:1; 等價于 flex:1 1 0; 剩余空間都給 right
缺點：兼容性問題，適用于小范圍布局
(6)兩列定寬與自適應
不定寬與自適應（寬度由內容決定）
float + margin 無法實現，left 中的 width 和 right 中的 margin-left 強耦合
(1) float + overflow
IE6 不兼容
實現簡單，代碼量少
(2) table
display:table; IE6，7 無法實現
width:0.1%; 如果設為 1px ，IE8 兼容有問題
(3) flex
(4)兩列不定寬 + 自適應
等分（每一列寬度相同，間距相同）
(1) float
實現條件：父容器增加一個間隔的寬度，每一列寬度需要包含間隔寬度
margin-left:-20px; 增加 20px 間距
box-sizing 設置 width 和 height 指定哪個區域的寬高，默認為 content-box
box-sizing:border-box; 讓設置的寬度包含 padding 區域
總寬度增加了 20px，每一列都是 25% 寬度，并且間距包含在 25% 里面
優點：兼容性較好，IE8 以上完全兼容，IE6，7對于百分比，浮點數四舍五入兼容性不太好
存在一個問題：列數發生變化時，結構和樣式耦合，需要修改樣式 width
(2) table
每一列間的間距在 table 模式下無法用 margin，只能用 padding
table 的特性為寬度默認為內容寬度，需要設置寬度為 100%，無法加上間隔寬度
解決方案：在 parent 外加一層 parent-fix
把增加 20px 功能轉到 parent-fix（設置之前 body 需要設置 margin：20px），令 parent 多出 20px
table-layout:fixed; 功能：使布局優先；假如單元格未設置寬度，單元格寬度平分，每一列不需要設置 25%，結構與樣式解耦
缺點是多了一層
(3) flex
flex:1 分配剩余空間
.column+.column 為相鄰兄弟選擇器，只選擇與 column 緊鄰的后面的 column
HTML 和 ?CSS 解耦
缺點：兼容性問題
等高
(1) table
background-clip 裁剪背景圖，默認為 border-box
(2) flex
flex item 默認輔軸上對齊方式（align-items）為 stretch （拉伸）
(3) float
float 沒有任何特性可以做到完全等高
令 left 和 right 背景顏色高度相同（偽等高）；padding-box 可承載背景顏色
padding-bottom:9999px; 背景變高，顏色到底，content-box 仍為原來高度
margin-bottom：-9999px; 抵消 padding
parent 中的 overflow:hidden; 把原先加上的 padding-bottom 截掉，截到兩列內容較高的高度。
兼容性較好，偽等高
全屏布局
全屏布局特點：布局充滿瀏覽器窗口；滾動條僅出現在內容區域
實現方案：Position；Flex
Position
絕對定位
IE6 下支持度不是很好
Flex
先從上到下劃分區域，實現 flex，再關注側欄和主欄
若需要實現百分比的布局，把原本定值的地方改成百分比即可
Flex兼容性：IE9 及以下
內容自適應 Flex
3.響應式
響應式布局簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
優點：網站可以自動適配到不同的設備，開發成本低
缺點：有可能會導致資源冗余，加載之后隱藏
viewport
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的窗口比屏幕寬，通過某一種比例等比縮小到屏幕的顯示區域
通過改變 viewport ，防止出現縮小的情況
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
width=device-width 把 viewport 寬度設成設備寬度，不同移動設備 device-width 不同， ? ? ? ? ? device-width 是設備推薦的一個比較恰當的值
initial-scale=1.0 把初始縮放設為 1.0 ，網站不會被縮放
user-scalable=no 防止用戶手動縮放
一般情況下，如果采用了響應式實現方式，不需要用戶手動縮放，通常情況下，都會加上這樣的 viewport 設置
在做 CSS 布局時，盡可能少用定寬模式，應該用自適應模式
@media 媒體查詢
當滿足條件時，CSS 起作用
通過最小寬度或最大寬度的值設置，讓屏幕應用某一樣式
例子
當窗口變小為 320px 一下時，左右排列變為上下排列
