<div> 占滿內容
<div>是HTML中的一個標簽，用來表示一個容器。在Web開發中，經常會遇到需要讓<div>元素占滿內容的情況。具體來說，當我們希望把一個<div>元素的寬度和高度自動調整，使其正好包含內部元素的內容時，我們可以使用一些技巧來實現這個效果。
以下是幾個代碼案例，詳細解釋如何讓<div>元素占滿內容：
1. 使用display: inline-block;
可以使用CSS的display屬性將<div>元素設為行內塊元素。行內塊元素會自動調整寬度和高度，使其正好包含內部元素的內容。下面是一個示例代碼：

<p>HTML:</p>
<pre>
\<div class="container"\>
\<p\>This is a block of text.\</p\>
\<p\>This is another block of text.\</p\>
\</div\>

CSS:

.container {
display: inline-block;
border: 1px solid black;
}

2. 使用flexbox布局
flexbox布局是一種靈活的布局方式，可以用來實現<div>元素自適應內容大小。通過將<div>元素的父容器設為display: flex，并使用flex屬性來調整子元素的大小，可以實現<div>元素占滿內容的效果。以下是一個示例代碼：

<p>HTML:</p>
<pre>
\<div class="container"\>
\<p\>This is a block of text.\</p\>
\<p\>This is another block of text.\</p\>
\</div\>

CSS:

.container {
display: flex;
border: 1px solid black;
}
<br>
.container p {
flex: 1;
}

3. 使用絕對定位
還可以使用CSS的絕對定位來實現<div>元素占滿內容。，將<div>元素的父容器設為position: relative，然后將<div>元素設為position: absolute，并設置top、right、bottom和left屬性為0，使其緊貼父容器的邊界。這樣，<div>元素就會自動調整寬度和高度，占滿內容。以下是一個示例代碼：

<p>HTML:</p>
<pre>
\<div class="container"\>
\<p\>This is a block of text.\</p\>
\<p\>This is another block of text.\</p\>
\</div\>

CSS:

.container {
position: relative;
border: 1px solid black;
}
<br>
.container div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

通過以上幾個代碼案例，我們可以看到如何讓<div>元素占滿內容。無論是使用display屬性的inline-block值、flexbox布局還是絕對定位，都可以實現這個效果。根據具體的需求和布局要求，選擇合適的方法來實現<div>元素的自適應大小。