CSS中有一種布局方式叫做品字布局，它將內(nèi)容分為四個(gè)區(qū)域，常用于響應(yīng)式網(wǎng)站設(shè)計(jì)中。下面介紹如何使用CSS實(shí)現(xiàn)品字布局。

HTML結(jié)構(gòu)如下：
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
CSS樣式如下：
.container {
display: flex;
flex-wrap: wrap;
}
.header, .footer {
width: 100%;
height: 100px;
}
.content {
width: calc(100% - 200px);
min-height: 500px;
}
.sidebar {
width: 200px;
min-height: 500px;
}
/* 媒體查詢 */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.content {
width: 100%;
}
}

上述代碼使用了flex布局，將內(nèi)容分成了頭部、內(nèi)容、側(cè)邊欄和底部四個(gè)部分。頭部和底部寬度為100%，高度為100px，側(cè)邊欄寬度為200px，內(nèi)容寬度為剩余的部分。在媒體查詢中，將flex-direction設(shè)置為column，使得布局變成了一列，側(cè)邊欄和內(nèi)容的寬度都為100%。