div 填充父是指在網頁開發中，將一個 div 元素填充滿其父元素的大小。通常情況下，div 元素的尺寸是由其內部內容決定的，但有時我們希望將其擴展至父元素的大小，以實現特定的布局效果。本文將通過幾個代碼案例來詳細解釋說明 div 填充父的常見方法和技巧。
在網頁開發中，有多種方式可以實現 div 填充父元素的效果。一種常見的方法是使用 CSS 的 position 屬性配合 top、right、bottom 和 left 屬性來控制 div 的位置，從而實現填充父元素的效果。下面是一個示例代碼：

<style>
.parent {
position: relative;
width: 500px;
height: 300px;
background-color: #eee;
}
<br>
    .child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ccc;
}
</style>
<br>
<div class="parent">
<div class="child"></div>
</div>

在這個例子中，父元素 div 的尺寸被顯式地設置為 500px 的寬度和 300px 的高度，并且具有背景色 #eee。子元素 div 的 position 屬性被設置為 absolute，使其脫離文檔流，并且通過設置 top、right、bottom 和 left 屬性為 0，將其定位于父元素的四個邊框上，從而填充滿整個父元素的區域。子元素 div 的背景色為 #ccc，以便更好地展示填充效果。通過這種方式，我們可以輕松地實現 div 填充父元素的效果。
除了使用 position 屬性外，還可以使用 CSS 的 flexbox 布局實現 div 填充父元素的效果。flexbox 布局是一種彈性盒子布局模型，通過靈活的空間分配和對子元素的定位來實現布局。下面是一個使用 flexbox 布局的例子：

<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 300px;
background-color: #eee;
}
<br>
    .child {
background-color: #ccc;
}
</style>
<br>
<div class="parent">
<div class="child">Flexbox 填充父元素</div>
</div>

在這個例子中，父元素 div 的 display 屬性被設置為 flex，以指定它采用 flexbox 布局。justify-content 和 align-items 屬性分別用于水平和垂直方向上的對齊方式，這里分別設置為 center，使子元素 div 在父元素 div 中居中對齊。子元素 div 的背景色為 #ccc，并包含文本內容。父元素 div 的寬度和高度被顯式地設置為 500px 和 300px。通過這種方式，子元素 div 將會自動填充整個父元素 div 的大小。
除了上述的方法，還可以使用 CSS 的 grid 布局來實現 div 填充父元素的效果。grid 布局是一種二維布局模型，通過將元素放置在網格容器中的行和列上來定義布局。下面是一個使用 grid 布局的例子：

<style>
.parent {
display: grid;
width: 500px;
height: 300px;
background-color: #eee;
}
<br>
    .child {
background-color: #ccc;
}
</style>
<br>
<div class="parent">
<div class="child">Grid 填充父元素</div>
</div>

在這個例子中，父元素 div 的 display 屬性被設置為 grid，以指定它采用 grid 布局。子元素 div 的背景色為 #ccc，并包含文本內容。父元素 div 的寬度和高度被顯式地設置為 500px 和 300px。通過這種方式，子元素 div 將會自動填充整個父元素 div 的大小。
綜上所述，div 填充父元素是網頁開發中常見的需求之一。通過使用 CSS 的 position、flexbox 和 grid 等屬性和布局模型，我們可以靈活地實現 div 填充父元素的效果。無論是使用脫離文檔流的定位方式還是使用彈性盒子和網格布局，都可以根據具體的需求選擇適合的方法來解決問題。通過合理運用這些技巧，我們可以輕松地實現各種各樣的布局效果，為網頁開發帶來更多的可能性。