<div padding 100%>指的是給一個(gè)<div>元素添加了一個(gè)100%的內(nèi)邊距。內(nèi)邊距（padding）是指元素內(nèi)容與邊框之間的區(qū)域。設(shè)置內(nèi)邊距可以改變元素的大小和布局。當(dāng)我們給<div>元素設(shè)置padding為100%時(shí)，元素的內(nèi)邊距會自動(dòng)填充滿父容器的寬度和高度。
下面我們用幾個(gè)代碼案例來詳細(xì)解釋這個(gè)屬性的用法。
案例一： ，我們創(chuàng)建一個(gè)簡單的HTML結(jié)構(gòu)如下：

<code>
<div class="container">
<div class="box"></div>
</div>
</code>

然后，我們給這個(gè)容器設(shè)置一個(gè)寬度和邊框樣式如下：

<code>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
</code>

接下來，我們將<div>元素加上<div padding 100%>屬性：

<code>
.box {
padding: 100%;
}
</code>

這樣，<div>元素的內(nèi)邊距將會填滿父容器的寬度和高度。由于內(nèi)邊距是相對于元素的寬度和高度來計(jì)算的，所以這里的100%實(shí)際上是相對于容器的尺寸來計(jì)算的。
案例二： 接下來，我們來看一個(gè)更復(fù)雜的例子。，我們創(chuàng)建一個(gè)有多個(gè)<div>元素的父容器：

<code>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</code>

然后，我們給每個(gè)<div>元素設(shè)置一些內(nèi)容和樣式：

<code>
.box {
padding: 100%;
background-color: gray;
border: 1px solid black;
margin-bottom: 10px;
}
</code>

這里的每個(gè)<div>元素都會自動(dòng)填充滿父容器的寬度和高度，創(chuàng)建出一個(gè)等高的布局。由于每個(gè)元素的內(nèi)邊距都是相對于自身的寬度和高度來計(jì)算的，所以無論容器的尺寸如何變化，每個(gè)元素的內(nèi)邊距都會保持一致，從而實(shí)現(xiàn)等高布局的效果。
： 通過給<div>元素添加<div padding 100%>屬性，我們可以輕松地實(shí)現(xiàn)自適應(yīng)的內(nèi)邊距效果，使元素的內(nèi)邊距始終填滿父容器的寬度和高度。這在處理等高布局或者創(chuàng)建自適應(yīng)尺寸的元素時(shí)非常有用。然而，需要注意的是<div padding 100%>屬性只對塊級元素有效，對于行內(nèi)元素?zé)o效。