一、靜態布局(static layout)
布局概念
最傳統、原始的web布局設計。網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。
優點採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。
缺點但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設計乙個布局並使用不同網域名稱呈現。
當然,它的布局比普通的靜態布局要複雜地多了,比如推薦模組又是乙個流式布局…
移動端由於靜態布局不適用於手機端,所以一般都會另設計乙個布局,並使用另乙個網域名稱。
pc端限制了最小的寬度, 低於了則以最小寬度出現滾動條
移動端限制了最大的寬度, 超過了則以最大寬度居中顯示
二、流式布局(liquid layout)
布局概念
流式布局也叫百分比布局
這邊引入一下自適應布局:
分別為不同的螢幕設定布局格式，當螢幕大小改變時，會出現不同的布局，意思就是在這個螢幕下這個元素塊在這個地方，但是在那個螢幕下，這個元素塊又會出現在那個地方。只是布局改變，元素不變。可以看成是不同螢幕下由多個靜態布局組成的。
而流式布局的特點是隨著螢幕的改變，頁面的布局沒有發生大的變化，可以進行適配調整，這個正好與自適應布局相補。
流式布局常用的設計模板:
左側固定+右側自適應
左右固定寬度+中間自適應(參考京東手機版)
頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示 。 你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
優點元素的寬高用百分比做單位，元素寬高按螢幕解析度調整，布局不發生變化
缺點螢幕尺度跨度過大的情況下，頁面不能正常顯示。
三、彈性布局(flex layout)
布局概念
彈性布局是css3引入的強大的布局方式，用來替代以前web開發人員使 的一些複雜易錯的hacks方法(如float實現流式布局)。
優點簡單、方便、快速
缺點css3新特性,瀏覽器相容性非常頭疼。而且手機瀏覽器對flex的支援也不是很理想。
實現方法
flex-flow: ||
flex-direction和flex-wrap的簡寫,在兩者選其一。
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-direction定義了彈性專案在彈性容器中的放置方向，預設是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
row:主軸為水平方向，專案沿主軸從左至右排列
column：主軸為豎直方向，專案沿主軸從上至下排列
row-reverse：主軸水平，專案從右至左排列，與row反向
column-reverse：主軸豎直，專案從下至上排列，與column反向
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-wrap定義是否需要拆行以使得彈性專案能被容器包含。*-reverse代表相反的方向。
nowrap：自動縮小專案，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式
自適應布局（adaptive）的特點是分別為不同的螢幕解析度定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨視窗大小的調整發生變化。 你可以把自適應布局看作是靜態布局的乙個系列。 就是說你看到的頁面，裡面元素的位置會變化而大小不會變化。
四、響應式布局(responsive layout)
採用自適應布局和流式布局的綜合方式，為不同螢幕解析度範圍建立流式布局
現在優秀的頁面都追求一套**可以實現三端的瀏覽;
從概念可以看出來,自適應布局的誕生是為了實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。
利用**查詢可以檢測到螢幕的尺寸(主要檢測寬度)，並設定不同的css樣式，就可以實現響應式的布局。
大名鼎鼎的bootstrap就是響應式布局的專家。
官方放出狠話:
bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
連我們最熱愛的react官方也熱衷於響應式布局設計:
《react官方**》
手機端下的react頁面:
五、總結一波
以上四種就是常用的前端布局方案啦，布局並不唯一。靈活應用就能構建出優秀的**
前端常見布局方式實現
這種方式最好應用於 按鈕 文字之類的居中模式，否則就需要借助inline block來進行居中布局。適用於塊級元素不給出寬高的情況下 需要借助transtrom的tanslatex方法 parent child子元素寬度已知的情況下 parent子元素 div 絕對定位 父元素需要被定位 子元素 t...
前端常見的布局方式 網格布局
一 網格布局 1 常規情況 html div class container div class text 1asdasdasdas adasdasdasdasdasdasdasdasdasdqweqweqwewqe qweqweqweqweqweqweqwdasdasdasdasd div div...
常見的四種前端布局方式
1.自適應 2.響應式 3.靜態 4.流式 剛剛接觸網頁設計的時候，常常分不清響應式布局和自適應布局，其實他們就是 傻傻分不清楚 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或...