本文介紹如何使用 CSS 父子框來管理網頁中的結構布局。父子框是一種常見的布局方式，通過將元素分組成父元素和子元素的形式，構建出網頁中的結構框架。以下是一個父子框的示例代碼：

<div class="container">
<div class="header">
<p>這是標題</p>
</div>
<div class="content">
<p>這是主要內容</p>
</div>
<div class="footer">
<p>這是頁腳</p>
</div>
</div>

在上面的代碼中，<div> 元素通過添加 class 屬性來指定其作用，例如 container、header、content 和 footer。通過這種方式，我們可以將元素劃分為不同的區域，從而更好地組織和管理網頁布局。 接下來，我們可以通過 CSS 樣式來定義父子框的大小、位置和樣式。例如，以下是一個基本樣式的示例：

.container {
width: 80%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
.header, .footer {
background-color: #f8f8f8;
padding: 10px;
}
.content {
margin: 10px 0;
}

在上面的 CSS 樣式中，我們首先為 .container 元素定義了寬度、外邊距、內邊距和邊框。接下來針對 .header、.content 和 .footer 元素設置了不同的樣式，例如背景顏色和內邊距等。 通過上述示例，我們可以看到，父子框是一種非常常見的網頁布局方式，可以幫助我們更好地組織和管理布局。同時，通過合理使用 CSS 樣式，我們可以為父子框設置更多個性化的樣式和特效，從而打造美觀和實用的網頁。