CSS響應式佈局--三欄佈局例項演示及優缺點詳解
學前端的小夥伴們都知道,CSS學起來很容易,但是要學精通了卻特別難。在前端市場需求火熱的今天,競爭相當激烈,光是會使用或者一兩種實現的方式是遠遠不夠的。不僅如此,還要深知各種解決方案的優劣,對各種特性瞭如指掌。
本次介紹的內容是CSS響應式佈局--三欄佈局
這是一道前端面試有關css內容的常考題。一般上來就會問:
請你實現一下三欄佈局:
一般的同學只是想到了一兩種比如 float、absolute,但是光是拿這些來回答面試官的問題是遠遠不夠的。
現在請跟本問來過一遍這道問題:
實現三欄佈局一般能想到5種佈局方案:
1. float
2. absolute
3. flexbox
4. table
5. grid
首先設定下全域性的樣式:
<style>
*, html {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
color: #ffffff;
}
</style>
下面是例項演示部分:
一、float佈局
思路:
左右div一個左浮動,一個右浮動,固定寬度,中間就能自適應寬度了。
中間那欄div,是個塊級元素,在不設寬度的前提下,會自動佔滿頁面一整行。
由於左右div都設定了float,所以他們都會脫離文件流。也就是說,float元素在其父級article元素內不佔據空間。
實際佔據整個空間的是中間的div,而左右div則懸浮於中間div的上方,所以視覺上看起來左右div像是佔據了左右兩邊欄。
浮動元素雖然脫離文件流,不受父級元素控制、不影響其它非浮動子元素的佈局,但是它會對子元素的文字內容造成影響,其效
果也就是我們平常使用的word中的文字環繞效果。
<section class="layout float"> <style media="screen"> .layout.float .left { float: left; width: 300px; background: #cecece; } .layout.float .right { float: right; width: 300px; background: #00a8fe; } .layout.float .center { background: yellowgreen; } </style> <article> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>Float Layout</h1> <p>很多文字</p> <p>很多文字</p> <p>很多文字</p> </div> </article> </section>
實際效果:
問題:
1. 為什麼三個div是左、右、中這樣排列?
如果是按照左中右排列的話,效果會變成這樣。右邊那列換到了下一行顯示。
原因在於浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於中間div先於右div渲染,之後的塊級元素都會另起一行顯示,所以右div會在下一行右浮動。
所以,為了解決此問題,先讓左右div先浮動,頂格顯示,然後再顯示中間的div即可。
2. 清除浮動問題
此問題會在清除浮動一文中詳細解答。
優點:由於float佈局很早就被廣泛使用,所以相容性比較好
缺點:需要清除浮動。
二、absolute佈局
思路:article下的左中右三個div都設定position為absolute, 左右div定寬,left:0, right:0。中間div設定left和right各位左右
div的寬度。
absolute為絕對定位,如果子元素position為absolute,那麼它會相對於對其position為relative或者absolute的父級元素進行
定位,如果父級元素都滿足不了要求,最終會相對於整個瀏覽器視窗進行定位。
<section class="layout absolute">
<style>
.layout.absolute article div {
min-height: 100px;
position: absolute;
}
.layout.absolute .left {
width: 300px;
left: 0;
background: #CECECE;
}
.layout.absolute .right {
width: 300px;
right: 0;
background: #9ACD32;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Absolute Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>
優點:使用快捷
缺點:可實用性不高,因為如果佈局內部子元素多而且很複雜時,其內部佈局需要涉及的相對計算比較多,導致其內部子元素也
需要設定為absolute,脫離了文件流。使整個頁面佈局,除錯起來非常困難。
三、 flexbox佈局
思路:article元素設定display為flex,其子元素左右div均為定寬,中間設定flex為1.
flexbox會將內部子元素(如果不設定寬高),根據其所佔比例(flex: 1)自動計運算元元素的尺寸,均勻排列
<section class="layout flex">
<style>
.layout.flex article {
display: flex;
}
.layout.flex .left {
width: 300px;
background: #CECECE;
}
.layout.flex .right {
width: 300px;
background: #9ACD32;
}
.layout.flex .center {
flex: 1;
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Flex Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>
效果:
優點:解決了上述兩種佈局的問題,實現了佈局優化,所用於移動端
缺點:版本比較多,需要做相容性處理
四、table佈局
思路: table佈局比較簡單,這裡只要設一行三列即可。整個table100%寬,左右兩列定寬,中間自適應。
ps:這裡換成table、tr、td元素效果相同
<section class="layout table">
<style>
.layout.table {
margin-top: 10px;
}
.layout.table article {
display: table;
width: 100%;
height: 100px;
}
.layout.table div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: #CECECE;
}
.layout.table .right {
width: 300px;
background: #9ACD32;
}
.layout.table .center {
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Table Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>
效果:
優點: 相容性好,使用方便。
缺點: 其中一個 單元格高度變化,旁邊也會隨之高度變化。換句話說,不能自定義某一欄的高度,所有的單元格必須等高。
五、grid佈局
思路:grid佈局是css3新出的一種佈局,常用於報刊雜誌那種多欄目佈局。通過對父元素article設定display: grid
再設定 grid-template-columns 及grid-template-rows即可。非常便捷。
<section class="layout grid">
<style>
.layout.grid {
margin-top: 10px;
}
.layout.grid article {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
.layout.grid .left {
background: #CECECE;
}
.layout.grid .right {
background: #9ACD32;
}
.layout.grid .center {
background: #00A8FE;
}
</style>
<article>
<div class="left"></div>
<div class="center">
<h1>Grid Layout</h1>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
<p>很多文字</p>
</div>
<div class="right"></div>
</article>
</section>
效果:
優點:編寫方便
缺點:由於是比較新,相容性會是一個問題,比如ie10之前的版本不支援
以上就是三欄佈局的五種寫法,如果有疑問,請在下方留言。