1.靜態布局：
靜態布局：給頁面元素設定固定的寬度和高度，單位用px，當視窗縮小，會出現滾動條，拉動滾動條顯示被遮擋內容。針對不同解析度的手機端，分別寫不同的樣式檔案。
2.彈性布局：
css3引入的，flex布局；優點在於其容易上手，根據flex規則很容易達到某個布局效果，然而缺點是：瀏覽器相容性比較差，只能相容到ie9及以上；
3.自適應布局：
分別為不同的螢幕解析度定義布局，在每個布局中，頁面元素不隨視窗大小的調整而發生變化，當視窗大小到達一定解析度時變化一次。建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍，使用@media**查詢技術。
4.流式布局：
元素的寬高用百分比做單位，元素寬高按螢幕解析度調整，布局不發生變化。螢幕尺度跨度過大的情況下，頁面不能正常顯示。
5.響應式布局：
使用meta標籤設定，頁面元素寬度隨視窗調整自動適配。採用自適應布局和流式布局的綜合方式，為不同螢幕解析度範圍建立流式布局。
布局選擇
1.如果只做pc端，那麼靜態布局是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定；
3.如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，這個時現在比較流行的方式。
前端主要布局方式
靜態布局 自適應布局 流式布局 彈性布局 響應式布局 布局的應用 常見布局問題 靜態布局就是傳統的 形式，網頁上的所有元素的尺寸一律使用px作為單位。當在螢幕寬高有調整時，出現橫向和豎向的滾動條來查閱被遮掩部分。編寫簡單，沒有相容性問題。不能根據使用者的螢幕尺寸做出不同的表現。建立多個靜態布局分別為...
前端常見布局方式實現
這種方式最好應用於 按鈕 文字之類的居中模式，否則就需要借助inline block來進行居中布局。適用於塊級元素不給出寬高的情況下 需要借助transtrom的tanslatex方法 parent child子元素寬度已知的情況下 parent子元素 div 絕對定位 父元素需要被定位 子元素 t...
前端常見的布局方式
一 靜態布局 static layout 布局概念 最傳統 原始的web布局設計。網頁最外層容器 outer 有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條 overflow scroll 來實現滾動查閱。優點採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。缺點但是移動端不...