對於前端來說，佈局也是必須掌握的，一個好的佈局可以讓頁面看起來更美觀。提到佈局，那就不得不說CSS三欄佈局。這是前端面試經常會問到的一個問題，算是基礎題。所謂的三欄佈局，一般是指左右兩邊固定中間自適應，或者是中間固定左右兩邊自適應。
左右兩邊固定中間自適應
聖盃佈局
- HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main在寫在前面，這樣在頁面渲染時會先加載中間，針對面試題優先加載中間部分）
-
style樣式設置
1、父元素設置高度
2、三個元素均設置浮動
3、中間main部分定寬100%：width: 100%，左右兩邊按產品需求設置寬高
4、左邊設置margin-left: -100%；右邊設置margin-right: -右盒子寬
5、父元素設置padding-left: 左盒子寬；padding-right: 右盒子寬
6、左右盒子相對定位<div class="container"> <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div> <div class="left f"></div> <div class="right f"></div> </div> <style> body { min-width: 700px; } .container { height: 300px; padding: 0 200px 0 200px; } .f { float: left; } .main { width: 100%; height: 300px; background-color: cornflowerblue; } .left { width: 200px; height: 300px; background-color: indianred; margin-left: -100%; position: relative; left: -200px; } .right { width: 200px; height: 300px; background-color: lightgreen; margin-left: -200px; position: relative; right: -200px; } </style>
該佈局受內部元素影響而破壞佈局的概率低，但是當瀏覽器屏幕縮小的一定程度時，左右兩側的內容會掉下來，或發生重疊現象。解決方案，給body加一個最小寬度（起碼大於左右兩側寬度之和）
雙飛翼佈局
與聖盃佈局的思路是一致的，只是有一些細微的差別。
- HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main在寫在前面，這樣在頁面渲染時會先加載中間，針對面試題優先加載中間部分）
-
style樣式設置
1、父元素設置高度
2、三個元素均設置浮動
3、中間main部分定寬100%：width: 100%，左右兩邊按產品需求設置寬高
4、中間main部分再加一個盒子inner，放置內容（與聖盃佈局的不同點）
5、左邊設置margin-left: -100%；右邊設置margin-right: -右盒子寬
6、新添加盒子，inner，設置左右padding或margin<div class="container"> <div class="main f"> <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div> </div> <div class="left f"></div> <div class="right f"></div> </div> <style> .container { height: 300px; } .f { float: left; } .main { width: 100%; height: 300px; background-color: cornflowerblue; } .left { width: 200px; height: 300px; background-color: indianred; margin-left: -100%; } .right { width: 200px; height: 300px; background-color: lightgreen; margin-left: -200px; } .inner { padding: 0 200px 0 200px; } </style>
自身浮動
- HTML結構設置
新建三個元素：left、right、main（注意，main寫在後面）
-
style樣式設置
1、左盒子左浮動，右盒子右浮動
2、中間部分設置margin值<div class="left"></div> <div class="right"></div> <div class="main">我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容我是中間內容</div> <style> .main { margin: 0 200px 0 200px; background-color: red; height: 200px; } .left { float: left; width: 200px; background-color: blue; height: 200px; } .right { float: right; width: 200px; background-color: pink; height: 200px; } </style>
CSS3新特性：flex
- HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main寫在中間）
-
style樣式設置
1、父元素設置寬度爲100%，display: flex；
2、左右兩則按產品需求設置寬高
3、中間部分設置flex: 1；<div class="container"> <div class="left"></div> <div class="right"></div> <div class="main">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div> </div> <style> .container { width: 100%; height: 200px; display: flex; } .main { flex: 1; background-color: red; height: 200px; } .left { width: 200px; background-color: blue; height: 200px; } .right { width: 200px; background-color: pink; height: 200px; } </style>
還有其他的寫法，這裏就不一一贅述，只是列舉了一些比較常用的，以及面試可能會問到的情況。CSS3還有很多好玩的特性，在工作和學習的過程中值得深入研究。
中間固定左右兩邊自適應
浮動 + 負邊距 （聖盃佈局）
- HTML結構設置
新建一個父元素，包含三個子元素：left、main、right（注意，main寫在中間）
-
style樣式設置
1、左右兩邊各佔50%的寬度
2、左邊負邊距 margin-left 佔中間div寬度的一半
3、右邊負邊距 margin-right 也佔中間div寬度的一半<div class="container"> <div class="left"></div> <div class="main">我是中間內容</div> <div class="right"></div> </div> <style> .main { width: 100px; text-align: center; float: left; background-color: lightgreen; height: 300px; } .left { height: 300px; float: left; width: 50%; margin-left: -50px; background-color: pink; } .right { height: 300px; float: right; width: 50%; margin-right: -50px; background-color: cornflowerblue; } </style>
CSS3新特性：flex
- HTML結構設置
新建一個父元素，包含三個子元素：left、main、right
-
style樣式設置
1、父元素設置display: flex；flex-direction: row；
2、左右設置flex-grow: 1，平分剩餘空間<div class="container"> <div class="left"></div> <div class="main">我是中間內容</div> <div class="right"></div> </div> <style> .container { display: flex; flex-direction : row; } .main { width: 200px; height: 300px; text-align: center; background-color: lightgreen; } .left { height: 300px; flex-grow: 1; background-color: pink; } .right { height: 300px; flex-grow: 1; background-color: cornflowerblue; } </style>
CSS3特性 calc(四則運算)
用於動態計算長度值。需要注意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 50px)。
<div class="container">
<div class="left"></div>
<div class="main">我是中間內容</div>
<div class="right"></div>
</div>
.container {
width: 100%;
height: 300px;
}
.f {
float: left;
}
.main {
width: 100px;
text-align: center;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
background-color: pink;
width: calc(50% - 50px); /*平分中間部分的寬度*/
}
.right {
height: 300px;
background-color: cornflowerblue;
width: calc(50% - 50px); /*平分中間部分的寬度*/
}
路漫漫其修遠兮，沒有別人聰慧，那就堅持不懈努，相信勤能補拙。每天進步一點點，總有一天會邁進一大步。