（靜態布局、流式布局、自適應布局、響應式布局、彈性布局）
一、靜態布局
頁上的所有元素的尺寸一律使用px作為單位
1.布局特點
不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫**時的布局來顯示。
常規的pc的**都是靜態（定寬度）布局的，也就是設定了min-width，這樣的話，
如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端
2.設計方法
pc：居中布局，所有樣式使用絕對寬度/高度(px)，設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分
優點:這種布局方式對設計師和css編寫者來說都是最簡單的，亦沒有相容性問題。
二、流式布局
流式布局的特點 是頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統 網格系統
1. 布局特點
螢幕解析度變化時，頁面裡元素的大小會變化而但布局不變
2. 設計方法
使用%百分比定義寬度，高度大都是用px來固定住
缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示
三、自適應布局
自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。
改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變），但在每個靜態布局中，
頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。
1、布局特點
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法
使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。
在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。
四、響應式布局
1. 布局特點
每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變
2. 設計方法
**查詢+流式布局。
優點：適應pc和移動端，如果足夠耐心，效果完美。
缺點：（1）**查詢是有限的，也就是可以列舉出來的，只能適應主流的寬高。
（2）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
五、彈性布局（rem/em布局）
1. rem/em區別：rem是相對於html元素的font-size大小而言的，而em是相對於其父元素
2. 使用 em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支援瀏覽器的字型大小調整和縮放等的正常顯示
3. 瀏覽器的預設字型高度一般為16px，即1em:16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，
css編寫者常常將頁面跟節點字型設為62.5%，比如選擇用rem控制字型時，先需要設定根節點html的字型大小，
因為瀏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。
結論1.如果只做pc端，那麼靜態布局（定寬度）是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定；
3.如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據**查詢做不同的布局。
等高布局 詳解
3 等高布局 height auto時的現象 height auto 全部都是內容撐開 每一列盒子高度同時變化,以最高的那列為基準 整個盒子的高度應該取決於最高的那列 3 真等高 背景盒子法 原理 父盒子取決於內容盒子裡最高的盒子的高度 1.多列浮動併排 清除浮動影響 2.給最外側的盒子再套幾個盒子...
偽等高布局
偽等高布局title charset utf 8 name viewport content width device width initial scale 1.0 type text css container box1 box2 box1 box2 clearfix after box3 bo...
CSS等高布局
做一些後台專案，和一下帶側邊欄專案的時候登高布局很常用，總結了下有幾種 1.margin bottom方法 這裡直接介紹我認為的最佳的側邊欄 分欄高度自動相等方法。核心的css 如下 數值不固定 margin bottom 3000px padding bottom 3000px 再配合父標籤的ov...