前言
作為一個前端開發人員，工作學習中經常會遇到快速構建網頁布局的情況，這篇我整理了一下我知道的一些方法。我也是第一次總結，包括聖杯布局，雙飛翼布局，table-cell布局都是第一次聽說，可能會有需要修改的地方請諒解。三欄布局顧名思義，就是左右兩側寬高固定，中間一列居中切隨着瀏覽器頁面變化。下面來看下具體的實現方法：
具體實現方法
實現效果如下：
（1）絕對定位方法
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
.box { border: 1px solid red; height: 200px; position: relative; overflow: hidden; } .main { background-color: springgreen; position: absolute; left: 150px; right: 150px; top: 0px; bottom: 0px; } .left { background-color: tomato; float: left; width: 100px; height: 200px; } .right { background-color: pink; float: right; width: 100px; height: 200px; }
總結：絕對定位方法其實就是首先給父盒子設置position：relative和overflow:hidden,然后分別左右兩個盒子向兩邊設置浮動，中間的盒子使用絕對定位並設置其相對父元素左右的間隔使得把中間盒子兩邊撐開，最后設置中間盒子的top和bottom值把其高度撐開。
（2）聖杯布局
說聖杯布局之前先來了解下什么是聖杯布局，首先看見這個名字，聖杯，其實就是我們飲酒的那個杯子，最主要的特點，分為上中下三個部分，這就不難想到我們平常遇到的網頁也是屬於這個結構的，頂部一般的導航欄，搜索框了，中間一般分兩三個部分了，占中間位置的主題內容，兩邊的小標題區域了，排行榜區域了，等等，這里我們所說的聖杯布局主要針對中間三部分來使用一下。這種方式使得中間盒子最先渲染出來。
<div class="box"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> <style> .box { border: 1px solid red; overflow: hidden; padding: 0 200px; } .main { width: 100%; height: 200px; position: relative; float: left; background-color: springgreen; } .left { background-color: tomato; position: relative; float: left; margin-left: -100%; left: -200px; width: 200px; height: 200px; } .right { background-color: pink; position: relative; float: left; margin-left: -200px; right: -200px; width: 200px; height: 200px; } </style>
總結：聖杯布局就是首先把中間盒子放在最前面，然后三欄都設置為浮動並且相對定位，給左右兩個盒子設置固定寬度，中間盒子設置100%寬度，此時父盒子寬度被中間盒子占滿，左右兩個盒子被擠在下面，由於浮動，給左盒子margin-left:-100%使得左側盒子擠到中間盒子左側，給右邊盒子設置margin-left:-200px;使得右側盒子在中間盒子右側，這樣就實現了左中右排列，但是此時中間盒子被兩側盒子覆蓋，因此需要設置父盒子padding:0 200px;並且給左右兩個盒子分別設置left:-200px;right:-200px;（即左右兩個盒子分別偏移自身的寬度去覆蓋掉中間盒子被擠的那一部分就好了），這樣聖杯布局就完成了。但是由於設置了父盒子的padding，當瀏覽器窗口太小會出現混亂。
（3）雙飛翼布局
由於聖杯布局對瀏覽器最小寬度有限制，經常出現問題，於是雙飛翼布局就出現了，專門解決這種bug，下面看下具體實現：
<div class="box"> <div class="wrap"> <div class="main">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <style> .box { border: 1px solid red; overflow: hidden; } .wrap { width: 100%; position: relative; float: left; background-color: black; } .main{ background-color: springgreen; margin: 0 200px; overflow: hidden; height: 200px; } .left { background-color: tomato; position: relative; float: left; margin-left: -100%; width: 200px; height: 200px; } .right { background-color: pink; position: relative; float: left; margin-left: -200px; width: 200px; height: 200px; } </style>
總結：聖杯布局由於寬度小時出現混亂，雙飛翼其實就是給中間的盒子包裹一層，里面的一層通過margin來實現了聖杯布局的padding,具體實現過程前兩步相同，首先中間盒子在最前面，並設置了寬度100%，導致中間的盒子占用一整行，然后通過浮動，設置左右兩邊的盒子覆蓋在中間盒子上面，從而達到了左中右三個盒子的效果，由於左右兩個盒子覆蓋在中間盒子上面，需要把真正想要的中間盒子嵌套進去一層，最終得到了雙飛翼的效果，瀏覽器無論怎么變化沒再也不用擔心混亂問題了。這種方式也使得中間盒子最先渲染出來。
（4）flex布局
flex布局工作中經常用到，對我來說這個時用的最6的一種方式了，畢竟當前使用最多的布局了吧，尤其做移動端開發的，更別說WEEX頁面默認flex布局了，你不知道flex布局真的需要去學習了。
<div class="box"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div> <style> .box { border: 1px solid red; overflow: hidden; display: flex; justify-content: center; } .main { height: 200px; flex: 4; background-color: springgreen; } .left { background-color: tomato; height: 200px; flex: 1; } .right { background-color: pink; height: 200px; flex: 1; } </style>
總結：flex布局是一種彈性布局，用來為盒裝模型提供最大的靈活性。具體使用請全面學習。
（5）table-cell布局
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
總結：給三欄都設置表格單元display:table-cell，然后分別設置左中右三個盒子寬度，左右盒子：width:200px;中間盒子：width:100%;這時會出現左右兩側盒子被擠到兩邊，因此分別設置min-width:200px;就解決了這個問題，古納於這個布局我接觸的比較少，今日這么一使用果然方便，日后遇到我得試試。這種布局方式能使得三欄的高度是統一的，但不能使center放在最前面得到最先渲染。
（6）網格布局
<div class="box"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div> <style> .box { border: 1px solid red; display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 200px auto 200px; } .main { background-color: springgreen; } .left { background-color: tomato; } .right { background-color: pink; } </style>
總結：我驚呆了啊，這網格布局如此強大嗎？具體實現：設置網格布局，設置三欄高度，設置三欄寬度，中間自適應沒兩邊固定，短短幾行代碼實現了聖杯雙飛翼那么多代碼的效果，網格布局如此強大，打開官網才發現，目前還有很多兼容性問題，好吧，只能先練練手了。
3.總結
常見需要手寫的布局就這些了，當然你也可以使用第三方的ui庫提供的需要布局，但是作為一個前端開發，更注重的還是要會學習一些具體的實現邏輯，而不是只會搬用一下API，模板之類的，希望對看到的人有些許幫助，有錯誤還請指正，謝謝啦！！如果覺得還不錯，請點下關注一起成長啦！
