<div>標簽是HTML中常用的一個塊級元素，它可以用于創建一個容器，用來包裹其他HTML元素。然而，有時候我們希望這個<div>元素能夠占滿其父元素的寬度或高度，以實現更好的頁面布局效果。在本篇文章中，我們將詳細討論如何通過使用CSS來實現<div>元素占滿其父元素的寬度或高度。

，我們來看一個簡單的例子。假設我們有一個<div>元素，它的父元素是一個<div>容器，如下所示：

<div class="parent">
<div class="child"></div>
</div>

為了讓子元素（<div class="child"></div>）占滿父元素（<div class="parent"></div>）的寬度，我們可以使用CSS中的屬性選擇器來設置樣式。

.parent {
width: 400px;
}
<br>
    .child {
width: 100%;
}

在上面的示例中，我們使用了屬性選擇器（.parent和.child）來分別選中父元素和子元素，并給它們設置樣式。其中，設置子元素的寬度為100%，就可以使子元素占滿父元素的寬度。

類似地，我們也可以使用相同的方法來實現子元素占滿父元素的高度。例如：

.parent {
height: 400px;
display: flex;
align-items: center;
}
<br>
    .child {
height: 100%;
}

在上面的示例中，我們通過設置父元素的高度為400px，并使用CSS的彈性布局（display: flex）和居中對齊（align-items: center），使子元素垂直居中。然后，通過設置子元素的高度為100%，就可以使子元素占滿父元素的高度。

除了以上的方法，我們還可以使用其他的CSS技巧來實現<div>元素占滿父元素的寬度或高度。例如，可以使用絕對定位（position: absolute）將子元素定位于父元素的左上角，并使用top、right、bottom和left屬性來拉伸子元素以占滿父元素。另外，還可以使用CSS的網格布局（display: grid）來實現更復雜的布局效果。

綜上所述，通過使用CSS的樣式選擇器和屬性，我們可以輕松地實現<div>元素占滿父元素的寬度或高度。無論是使用屬性選擇器設置寬度為100%，還是使用絕對定位或網格布局，都能夠幫助我們更好地布局網頁，提升用戶體驗。