靜態布局就是每乙個元素都用px寫死。這種布局方法毫無疑問是最簡單（因為不用考慮不同解析度的情況），同時也是最糟糕的。
不過，現代大多數企業的pc站點先使用乙個靜態布局，然後移動端再單獨設計乙個布局。
彈性布局採用高階的度量單位（如em, rem）來度量文字的大小，其它採用px來進行度量。
這樣做得好處是，在其它元素不變的情況下，我們的文字可以根據具體的解析度放大和縮小。
這在移動端是非常有益處的，因為在移動端，我們經常會因為解析度的問題，導致網頁的縮放，字也看不清，給人一種非常不爽的感覺。
自適應布局就是結合css3的@media查詢，根據不同的解析度範圍選擇不同的靜態布局頁面。
對於同一裝置而言，獲得的其實是乙個靜態頁面，這個頁面的大小是不會再改變的了，即使你再之後修改了解析度。
相對於之前兩種布局而言，自適應布局有了很大的進步，已經有響應式布局的影子了。
流式布局就是大部分元素高度用px寫死，然後寬度用百分比布局。
典型的案例如bootstrap的柵格系統。
這樣做主要是為了在相近的解析度範圍之內相容。當然，如果解析度相差得特別大，那效果肯定不好。
這裡我們可以稍微講得詳細一點，流式布局主要有以下幾種：
左側固定，右側百分比。
右側固定，左側百分比。
兩側固定，中間百分比（聖杯布局或者叫雙飛翼布局）。-->由此可見布局也有上下級之分.
所有的都按照百分比來。
流式布局的實現方式：
乙個就是按照之前的定義，使用百分比布局。
可以給父元素寫乙個display:flex, 然後子元素使用flex進行布局。
建立bfc(block formating context),也就是在並列子元素中建立bfc。
之前提到的流式布局的最後一種，可以採用li+float的方法來實現。
響應式布局是最完美的布局，他要確保的是在乙個頁面的所有終端上都保持乙個非常好的效果。當然這對css程式設計師而言就不那麼又好了233.
響應式布局的主要方法就是通過流式布局和自適應布局相結合，也就是利用**查詢和自適應布局進行編寫。
html css常見頁面布局（一）
1.div元素居中 1.1居中的div元素寬高已定 效果圖 如下 css樣式 div1 div2 tips 遇到寬高固定的元素居中問題都可以按照這樣的樣式來設計，父元素應用position relative absolute 主要是為了照顧子div中的position absolute ps abs...
預設布局換行 幾種常見的htmlcss布局
ie盒模型和標準盒模型的區別 兩者的區別在於content的不同，ie盒模型的content包括border padding flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。對於ie，其瀏覽器的相容性，flex 只支援 ie 10 採用 flex 布局...
HTML CSS 五種布局方式
已知布局元素的高度，寫出三欄布局，要求左欄 右欄寬度各為300px，中間自適應。一 浮動布局 charset utf 8 浮動布局title type text css wrap1 div wrap1 left wrap1 right wrap1 center style head class wr...