CSS布局是前端開發(fā)中必備的技能之一，掌握好CSS布局對于網(wǎng)頁的美觀和性能都有很大的幫助。下面就來介紹一些經(jīng)典的CSS布局案例。

1. 等高布局

.column {
display: table-cell;
height: 300px; /* 設(shè)置高度 */
}

等高布局是指多個(gè)列的高度相等，無論內(nèi)容的多少，都能保證背景色或圖片的連續(xù)性。通過將每個(gè)列的display屬性設(shè)置為table-cell，然后再設(shè)置高度為固定值就可以實(shí)現(xiàn)了。

2. 圣杯布局

.container {
padding-left: 200px;
padding-right:  150px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
float: right;
width: 150px;
margin-right: -150px;
position: relative;
right: -150px;
}

圣杯布局是指一個(gè)固定寬度的中間區(qū)域（main）和兩個(gè)可變寬度的側(cè)邊欄（left和right）。通過設(shè)置各個(gè)元素的浮動和負(fù)邊距，可以實(shí)現(xiàn)中間自適應(yīng)大小，兩邊列寬度自適應(yīng)的效果。

3. 雙飛翼布局

.container {
margin: 0 auto;
width: 100%;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 200px;
margin-left: -100%; 
}
.right {
float: left;
width: 150px;
margin-left: -150px; 
}

雙飛翼布局也是三欄布局的一種，實(shí)現(xiàn)方法與圣杯布局類似。它和圣杯布局最主要的區(qū)別就是：通過將左右兩邊的div放到main的內(nèi)部去實(shí)現(xiàn)左右固定寬度，而不是設(shè)置為默認(rèn)位置。

以上就是三種比較經(jīng)典的CSS布局，不同的場景可以選擇不同的布局方式，掌握好CSS布局對于前端開發(fā)者而言是非常重要的。