CSS盒模型是CSS布局的基礎，它允許我們將網頁分成一個或多個矩形框，并在這些框中排列內容。本文將介紹如何使用CSS盒模型制作網頁布局的視頻教程。

<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
.wrapper {
width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
}
.header {
height: 100px;
background-color: #333;
color: #fff;
}
.content {
height: 500px;
background-color: #f7f7f7;
margin-top: 10px;
padding: 10px;
}
.footer {
height: 100px;
background-color: #666;
color: #fff;
margin-top: 10px;
text-align: center;
line-height: 100px;
}

首先，我們需要創建一個div元素作為整個布局的容器，并給它添加一個類名為“wrapper”。然后在這個div中添加三個子元素，分別是表示頭部、內容和底部的div元素，并分別添加類名為“header”、“content”和“footer”。

接著，我們需要設置wrapper的寬度為80%，并且使它居中顯示。為了讓布局更好看，我們還可以添加一些邊框和內邊距。接下來，我們對三個子元素分別添加樣式。頭部和底部都需要設置高度和背景顏色，并且頭部需要設置文字顏色。內容區需要設置高度和背景顏色，并且還需要添加上下的外邊距和內邊距。

最后的效果是一個簡單的網頁布局，包括頭部、內容和底部三個區域。通過學習CSS盒模型的相關知識，我們能夠更加靈活地掌握布局技巧，制作出更加出色的網頁設計。