CSS是一種樣式表語言，應(yīng)用在網(wǎng)頁開發(fā)中。CSS可以設(shè)置網(wǎng)頁的各種元素樣式，包括布局、顏色、字體和大小等。其中，上下布局是常見的網(wǎng)頁設(shè)計布局之一。下面我們來詳細介紹一下如何用CSS進行上下布局。 首先，在HTML中設(shè)置兩個容器，分別代表上下兩部分，如下：

<div class="header">
<p>這是頭部</p>
</div>
<div class="body">
<p>這是內(nèi)容</p>
</div>

以上代碼中，我們使用了div元素作為容器，并分別給它們添加了class屬性值為"header"和"body"。 接下來，在CSS樣式表中設(shè)置這兩個容器的樣式：

.header {
background-color: #f0f0f0;
height: 100px;
}
.body {
background-color: #ffffff;
height: calc(100% - 100px);
}

以上代碼中，我們?yōu)?header容器設(shè)置了背景顏色為#f0f0f0，高度為100px，即頭部的高度。同時，我們?yōu)?body容器設(shè)置了背景顏色為#ffffff，高度為100%減去頭部高度，即內(nèi)容部分的高度。這樣，就實現(xiàn)了一個上下布局。 需要注意的是，以上代碼中的calc()函數(shù)是CSS3新增的計算函數(shù)，用于計算元素的大小。其中，calc(100% - 100px)表示元素高度為視口高度減去100px。 以上就是關(guān)于如何用CSS進行上下布局的詳細介紹，希望對大家有所幫助。