佈局：高度已知，佈局一個三欄佈局，左欄和右欄寬度為200px，中間自適應 浮動佈局詳解
需求：高度已知為200px，寫出三欄佈局，左欄和右欄各位200px，中間自適應，如下圖所示：
方法一：float浮動佈局
原理是：定義三個區塊，需要注意的是中間的區塊放在右邊區塊的下面，統一設定高度為200px，然後設定左邊欄寬度為200px並且float:left，設定右邊欄寬度為200px並且float:right
優點：相容性比較好
缺點：float會脫離文件流，需要處理float周邊的元素比如清除浮動
浮動佈局的原理：檢視浮動佈局詳解
<style> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 200px; } .left{ width: 200px; float: left; background-color: red; } .right{ width: 200px; float: right; background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center">浮動解決方案</div> </article> </section> </body>
效果如下：拉動瀏覽器視窗的時候，中間寬度自動變化，左右邊欄不會變化
當center這個元素裡面的內容超過設定的這個高度，會出現如下這樣的問題
解決辦法可以在center中新增一個屬性：overflow: hidden;後效果如下：
所以當高度不確定的時候，這種佈局方式不適用，左右兩邊的高度不會跟著變動
方法二：絕對定位佈局
實現原理：設定三個區塊分別左中右，並且統一設定高度為200px和絕對定位，左邊欄left:0，右邊欄right:0,最重要的是中間的區塊，不設定寬度，並且設定left:200px,right:200px，這個定位的數值也就是左邊欄和右邊欄的寬度大小
優點：快捷，不容易出問題
缺點：定位會脫離文件流，那麼後面的元素也都是要脫離文件流的，這個方式的可使用性比較差
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 200px; position: absolute; } .left{ width: 200px; left: 0; background-color: red; } .right{ right: 0; width: 200px; background-color: blue; } .center{ background-color: green; left: 200px; right: 200px; } </style> <body> <section class="layout absolute"> <article class="left-right-center"> <div class="left"></div> <div class="center">絕對定位解決方案</div> <div class="right"></div> </article> </section> </body> </html>
效果如下：拉動瀏覽器視窗的時候，中間寬度自動變化，左右邊欄不會變化
方法三：flexbox佈局方式
實現原理：首先定義三個區塊，分別為左中右，並且統一設定高度為200px，然後在這三個區塊的父元素中設定display:flex，設定左邊欄和右邊欄寬度為200px,中間區塊設定flex:1
優點：比較完美的一種方式，在移動端基本都是使用這個佈局方式，這是css3中的新的佈局方式，當設定最小高度後，中間區塊內容溢位時高度會自動撐開，左右兩邊的高度也可以跟著撐開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.flexbox article div{ min-height: 200px; } .layout.flexbox .left-right-center{ display: flex; } .left{ width: 200px; background-color: red; } .right{ width: 200px; background-color: blue; } .center{ background-color: green; flex: 1; } </style> <body> <section class="layout flexbox"> <article class="left-right-center"> <div class="left"></div> <div class="center">flexbox解決方案</div> <div class="right"></div> </article> </section> </body> </html>
效果如下：拉動瀏覽器視窗的時候，中間寬度自動變化，左右邊欄不會變化
方法四：表格佈局方式
實現原理：定義三個區塊，並且統一設定高度為200px和display:table-cell，然後左邊欄和右邊欄寬頻設定為200px,中間區塊不設定寬度，最後需要在這三個區塊的父元素上設定width:100%和display:table
優點：相容性非常好，在IE8也是可以的，彌補flexbox佈局在IE8下的不支援
缺點：當某個區塊高度不足的時候（固定高度），其他區塊也跟著需要調整高度，但有這種需求就是其他區塊不想跟著調整高度，這就是這個佈局的缺點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.table article div{ display: table-cell; height: 200px; } .layout.table .left-right-center{ display: table; width: 100%; } .left{ width: 200px; background-color: red; } .right{ width: 200px; background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout table"> <article class="left-right-center"> <div class="left"></div> <div class="center">表格佈局解決方案</div> <div class="right"></div> </article> </section> </body> </html>
方法五：網格佈局
實現原理：定義三個區塊分別為左邊欄，中間區塊，右邊欄，然後再父元素上設定display:grid，grid-template-rows: 200px;（設定格子的高度），grid-template-columns: 200px auto 200px;（這裡表示有三列，第一列和第三列的寬度為200px，第二列自動）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> html *{ padding: 0; margin: 0; } .layout.grid .left-right-center{ width:100%; display: grid; grid-template-rows: 200px; grid-template-columns: 200px auto 200px; } .left{ background-color: red; } .right{ background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout grid"> <article class="left-right-center"> <div class="left"></div> <div class="center">網格佈局解決方案</div> <div class="right"></div> </article> </section> </body> </html>
效果如下：效果如下：拉動瀏覽器視窗的時候，中間寬度自動變化，左右邊欄不會變化
需求：如果高度不確定，那麼上述的佈局方式哪個還可以適用
flexbox佈局和table佈局是可以通用的，會自動增加高度（三個區塊都會自動增加高度）
網格佈局：高度不會自動增加，裡面的內容會溢位，但可以不設定grid-template-rows: 200px;這個屬性的話，三列都會隨著內容而增高，並且可以設定三個區塊的最小高度
<style> html *{ padding: 0; margin: 0; } .layout.grid .left-right-center{ width:100%; display: grid; min-height: 100px; grid-template-columns: 200px auto 200px; } .left{ background-color: red; } .right{ background-color: blue; } .center{ background-color: green; } </style> <body> <section class="layout grid"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <p>flexbox解決方案</p> <p>flexbox解決方案</p> <p>flexbox解決方案</p> </div> <div class="right"></div> </article> </section> </body>
浮動佈局：會出現下面這種情況
因為浮動的原理，中間區塊的內容被區塊1擋住了，當內容超出以後，沒有了遮擋物，所以就出現了這種情況，解決這種問題需要使用BFC（檢視盒子模型和彈性盒子模型的詳解）
絕對定位：比如講center裡的內容增加，超過高度後這個區塊自動增加，但是其他區塊是不會自動增加的