一、靜態布局(static layout)
布局概念
最傳統、原始的web布局設計。網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。
優點採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。
缺點但是移動端不可以使用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)（推薦使用bootstap工具）
採用自適應布局和流式布局的綜合方式，為不同螢幕解析度範圍建立流式布局
現在優秀的頁面都追求一套**可以實現三端的瀏覽;
從概念可以看出來,自適應布局的誕生是為了實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。
利用**查詢可以檢測到螢幕的尺寸(主要檢測寬度)，並設定不同的css樣式，就可以實現響應式的布局。
大名鼎鼎的bootstrap就是響應式布局的專家。
官方放出狠話:
bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
前端常見的布局方式
一 靜態布局 static layout 布局概念 最傳統 原始的web布局設計。網頁最外層容器 outer 有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條 overflow scroll 來實現滾動查閱。優點採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。缺點但是移動端不...
CSS常見布局方式
如下 child1 child2 clearfix after給兩個子元素新增float，然後給它們的父元素新增clearfix類用於清除浮動。child1 child2 child3 設定main寬度為100 再設定兩個側欄的寬度。設定 負邊距，child2設定 負左邊距 為100 child3設...
css常見布局方式
布局是css中乙個重要部分，下面總結了css布局中的常用技巧，包括常用的水平居中 垂直居中方法，以及單列布局 多列布局的多種實現方式 包括傳統的盒模型布局和比較新的flex布局實現 一 居中方式 水平居中 水平居中對於子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，採取的布局方案是不同。行內元素...