面試題---CSS的7種方法實現三欄佈局（經典）

要求

假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px，中間自適應

方案：float佈局，absolute佈局，表格佈局，grid佈局，flex佈局，雙飛翼佈局，聖盃佈局（共7種）

float佈局

作法：左右兩側部分分別左右浮動，中間容器要設置的左右margin爲左右兩側分別的寬度

注意：在中間的div區域要放到最前面進行渲染

優勢：比較簡單，兼容性也比較好。只要清除浮動作的好，是沒有什麼問題的

缺點：浮動元素是脫離文檔流，要作清除浮動，這個處理很差的話，會帶來不少問題，好比高度塌陷等

absolute佈局

作法：對左中右三個區域部分都設置絕對定位，左邊區域設置left爲0，右邊區域設置right爲0，中間部分設置的left和right分別是左右區域的寬度

優勢：很快捷，設置很方便，並且也不容易出問題

缺點：絕對定位是脫離文檔流的，意味着下面的全部子元素也會脫離文檔流，這就致使了這種方法的有效性和可以使用性是比較差的

table佈局

作法：對包裹的父容器設置display：table，對左中右區域分別設置display：table-cell

優勢：實現簡單，代碼少

缺點：當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一塊兒變高的，而有時候這種效果不是咱們想要的

grid佈局

作法：對包裹的父容器設置display：grid，而且設置grid-template-columns：左邊寬度 auto（中間寬度自動） 右邊寬度，grid-template-rows: 各區域高度

注意：在中間的div區域要放到中間進行渲染

優勢：簡單快捷(能夠隨意組合，其一高度發生變化，另外模塊也不會進行跟着變化)

缺點：不支持IE10如下

flex佈局

作法：對包裹的父容器設置display：flex，設置中間的區域爲flex：1

注意：在中間的div區域要放到中間進行渲染

優勢：簡單快捷(在不設置高度狀況下，min-height除外，那麼其一塊高度發生變化，其它塊高度也會發生變化)

缺點：不支持IE10如下

聖盃佈局（經過左浮動加相對定位實現）

作法：對包裹的父容器設置padding（給左右兩區域留出位置）。對中間區域設置寬度爲100%
     對左中右區域設置position：relative，左區域的left：-左區域寬度，margin-left：-100%。右區域的right：-右區域寬度，margin-left：-右區域寬度（左右區域佔據了父容器的padding部分）

注意：最好給body設置一個最小寬度

優勢：結構簡單，無多餘dom層

缺點：中間部分寬度小於左側時會發生混亂

雙飛翼佈局（經過左浮動配合margin實現）（是對聖盃佈局的改進）

作法：對左中右區域都設置左浮動，對於中間區域用一個容器包裹着，並設置寬度爲100%。中間包裹的子區域，設置左右margin爲左右區域的寬度（給左右兩區域留出位置）
      設置左邊區域的margin-left：-100%，設置右邊區域的margin-left：-右區域寬度（左右區域所佔據的空間是中間區域的margin空間）

注意：對於中間的區域必定要有個容器包裹着

優勢：支持各類寬高變化，通用性強

缺點：多了一層包裹中間區域的代碼(增長渲染樹的計算量)，三欄高度不統一

延伸問題

若高度不固定，則可使用哪一種佈局
方案：flex佈局，grid佈局，table佈局