實現三欄自適應布局 左右寬度固定，中間自適應
1.傳統的position和margin屬性進行布局
1）絕對定位法
原理：將左右兩邊使用absolute定位，因為絕對定位使其脫離文件流，後面的center會自然流動到他們上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應螢幕寬度。
文件**：
中間自適應
我是左邊
我是右邊
我是中間
.box
#left,#right
#left
#right
#center
該法布局的好處，三個div順序可以任意改變。不足是 因為絕對定位，所以如果頁面上還有其他內容，top的值需要小心處理，最好能夠對css樣式進行乙個初始化，就像在上面例子中加了乙個標題，如果不對樣式進行初始化，則兩邊和中間的值會對不齊。 另外，隨著瀏覽器視窗縮小，小於200px的時候，會發生壓縮。
結果如圖，可以看到中間欄寬度隨著螢幕大小伸縮。
2）使用自身浮動法
自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行乙個定位。
html**
我是左邊
我是右邊
我是中間
#left_self,#right_self
#left_self
#right_self
#center_self
3）聖杯布局
聖杯布局的原理是margin負值法。使用聖杯布局首先需要在center元素外部包含乙個div，包含div需要設定float屬性使其形成乙個bfc，並設定寬度，並且這個寬度要和left塊的margin負值進行配合，具體原理
參考這裡
。這裡對聖杯布局解釋特別詳細。
html**
* wrap 寬度佔據父級100%，後頭的兩個盒子會被擠壓到下一行，給子集設定margin，把左右兩邊的空間空出來，給左邊盒子設定margin -100% 則他會被向上平移一行，右邊的自然就別擠壓到了第二行的最左邊，再設定margin-left 為自身的寬度，就會向上移動 */
#wrap
#wrap #center2
#left_margin,#right_margin
#left_margin
#right_margin
2.使用css3新特性進行布局
在外圍包裹一層div，設定為display：flex；中間設定flex：1；但是盒模型預設緊緊挨著，可以使用margin控制外邊距。
#box
#left_box,#right_box
#center_box
面試CSS 兩側固定寬度，中間自適應的三列布局
1.聖杯布局 聖杯布局的的原理是利用margin的負值的特性來實現的。注 布局中間部分一定要放在前面，左右順序不限制。對於left塊的margin負值一定要等於wrap的寬度。主要步驟如下 在center塊外層新增乙個div，並設定左浮，以及寬度 這個寬度要與left塊的margin left相匹配...
CSS3響應自適應布局Media Queries
media queries是css3新增加的乙個模組功能，其最大的特色就是通過css3來查詢 然後呼叫對應的樣式。在徹底地了解media queries之前，我們需要了解其中的兩個重要部分，第乙個是 型別，第二個是 特性。型別 media type 在css2中是乙個常見的屬性，可以通過 型別對不同...
css3自適應布局單位vw,vh
視口單位 viewport units 什麼是視口？在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 桌面端指的是瀏覽器的可...