相信每一個前端工程師都必不可少的要學會CSS，今天就來為大家介紹一下CSS的入門教程-布局。

CSS布局的目的是為了能夠?qū)⒕W(wǎng)頁中的元素進行合理的排列，使其更加美觀、易讀，同時提高用戶的瀏覽體驗。下面就帶您一起學習CSS的布局。

<!-- HTML代碼 -->
<div class="wrapper">
<div class="header">網(wǎng)頁頭部</div>
<div class="main">網(wǎng)頁主體</div>
<div class="footer">網(wǎng)頁底部</div>
</div>
/* CSS代碼 */
.wrapper{
width: 960px;
margin: 0 auto;
}
.header, .main, .footer{
box-sizing: border-box;
padding: 20px;
text-align: center;
}
.header{
height: 80px;
background-color: #ccc;
}
.main{
height: 500px;
background-color: #eee;
}
.footer{
height: 100px;
background-color: #aaa;
}

上面的代碼是一個簡單的網(wǎng)頁布局，其中 .wrapper 是作為整個網(wǎng)頁的容器，定義了它的寬度以及居中對齊。 .header、.main、.footer 分別代表了網(wǎng)頁的頭部、主體、底部，都進行了 padding 和文本居中的樣式設(shè)置。

其中，我們使用了 box-sizing: border-box; 屬性，這個屬性是為了方便我們的樣式布局而出現(xiàn)的，它指定了在 padding 和 border 的寬度內(nèi)計算元素的寬度，這樣我們就可以直接設(shè)置元素的寬度和高度，而不用再去減去 padding 或者 border 的寬度。

此外，我們還設(shè)置了每個部分的高度和背景顏色，更加明顯的區(qū)分了整個網(wǎng)頁的結(jié)構(gòu)。

當然，CSS的布局還涉及到許多其他的屬性和技巧，比如：定位、浮動等等，希望這個簡單的入門教程能讓你對CSS布局有一個初步的認識。