CSS中子div自適應(yīng)父div，是指子div能夠根據(jù)父div的大小自動調(diào)整自身的尺寸和位置，從而實(shí)現(xiàn)布局的自適應(yīng)。這樣的布局方式可以使頁面在不同設(shè)備上展現(xiàn)出良好的適應(yīng)性和可用性。下面將通過幾個(gè)代碼案例詳細(xì)解釋和演示子div自適應(yīng)父div的方法。
，我們通過使用CSS中的百分比單位來實(shí)現(xiàn)子div自適應(yīng)父div的布局。百分比單位可以根據(jù)父元素的尺寸進(jìn)行相對計(jì)算，從而實(shí)現(xiàn)自適應(yīng)布局。下面是一個(gè)示例代碼：

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

<code>
.parent {
width: 100%;
height: 300px;
background-color: gray;
position: relative;
}
<br>
    .child {
width: 50%;
height: 50%;
background-color: orange;
position: absolute;
left: 25%;
top: 25%;
}
</code>

在上述代碼中，通過給父div設(shè)置寬度為100%，子div的寬度和位置都是相對于父div來計(jì)算的，子div的寬度為父div寬度的50%，高度為父div高度的50%，左邊距和上邊距都是父div尺寸的25%。
另外一種常見的方法是使用flex布局實(shí)現(xiàn)子div自適應(yīng)父div。flex布局可以自動根據(jù)父元素的尺寸進(jìn)行布局，從而實(shí)現(xiàn)自適應(yīng)。下面是一個(gè)示例代碼：

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

<code>
.parent {
width: 100%;
height: 300px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
<br>
    .child {
width: 50%;
height: 50%;
background-color: orange;
}
</code>

在上述代碼中，通過給父div設(shè)置display: flex屬性，子div會自動水平垂直居中，并根據(jù)父div的尺寸進(jìn)行相應(yīng)的調(diào)整。子div的寬度為父div寬度的50%，高度為父div高度的50%。
通過上述代碼案例的說明，我們可以看到使用百分比單位和flex布局都可以實(shí)現(xiàn)子div自適應(yīng)父div的效果。這些方法都能夠使子div根據(jù)父div的尺寸進(jìn)行調(diào)整，從而適應(yīng)不同的屏幕尺寸和設(shè)備。這種自適應(yīng)布局方式在響應(yīng)式設(shè)計(jì)和移動端開發(fā)中非常常見，能夠?yàn)橛脩籼峁└玫臑g覽體驗(yàn)。