1、靜態布局（static layout）
即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。
優點：這種布局方式對設計師和css編寫者來說都是最簡單的，亦沒有相容性問題。
缺點：顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。當前，大部分門戶**、大部分企業的pc宣傳站點都採用了這種布局方式。固定畫素尺寸的網頁是匹配固定畫素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的製作方法，我們需要一些適應未知裝置的方法。
1.彈性布局
優點：
- 1 適應性強，在做不同螢幕解析度的介面時非常實用
- 2 可以隨意按照寬度、比例劃分元素的寬高
- 3 可以輕鬆改變元素的顯示順序
- 4 彈性布局實現快捷，易維護
定位布局快捷，但是有效性比較差，因為脫離了文件流3.html頁面布局之table布局：
table布局：
table來做整體頁面的布局，布局技巧歸納如下：
（1）按照設計圖的尺寸設定**的寬高以及單元格的寬高
（2）將**的border、cellpadding、cellspacing全部設定為0，**的邊框和間距就不占有頁面空間，它只起到劃分空間的作用。
**的cellpadding：設定**中的單元格內容（如：文字等）離單元格邊線的距離
**的cellspacing：設定**中單元格之間的間距
（3）針對區域性複雜的布局，可以在單元格裡面再巢狀**，巢狀**劃分區域性的空間。
（4）單元格中的元素或者巢狀的**用align和valign設定對齊方式
（5）通過屬性或者css樣式設定單元格中元素的樣式
結論：1.如果只做pc端，那麼靜態布局（定寬度）是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定；
3.如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據**查詢做不同的布局。
布局參考
html5中的幾種布局簡單比較
html中的布局主要由靜態布局 自適應布局 流式布局以及響應式布局幾類，簡單比較以下這幾種布局的區別和特點。一 靜態布局 static layout 表現 在傳統web設計中，不管瀏覽器尺寸具體大小多少，網頁的布局會一直按照最開始的布局來顯示。特點 固定死寬高。二 自適應布局 adaptive la...
布局的幾種形式
一 靜態布局 頁上的所有元素的尺寸一律使用px作為單位 1.布局特點 不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布局的，也就是設定了min width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於...
幾種布局方式
1.固定布局 方法裡把加好，然後根據設計稿設定相應的寬度即可，其他地方類似於pc端。優點 思路沿用pc端，上手比較快 缺點 大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是固定的寬度 設計稿的大小 導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。2.流動布局 方法適用百分比 做單位。優點 能更很好...