在不同父元素類型下，width:100% 的表現(xiàn)有什么區(qū)別？

css 中 width:100% 的行為差異

width: 100% 在 CSS 布局中的表現(xiàn)取決于其父元素的 display 屬性。 不同的 display 屬性會影響元素的渲染方式，從而改變 width: 100% 的計算基準。

讓我們通過幾個例子來闡明這一點。

場景一：父元素為 inline-block

<div>   <div style="height: 100px;">測試內(nèi)容</div>   <div style="display: inline-block; border: 1px solid red; padding: 10px;">     <span style="width: 100%;">這是 inline-block 內(nèi)的 span</span>   </div> </div>

在這個例子中，span 元素的父元素是 inline-block 類型。 width: 100% 會使 span 元素占據(jù)其父元素的全部可用寬度。 這意味著 span 的寬度會根據(jù)父元素的寬度進行調(diào)整。

場景二：父元素為 inline

<div>   <div style="height: 100px;">測試內(nèi)容</div>   <div style="display: inline; border: 1px solid red; padding: 10px;">     <span style="width: 100%;">這是 inline 內(nèi)的 span</span>   </div> </div>

當父元素為 inline 時，情況就有所不同。 inline 元素的寬度會根據(jù)其內(nèi)容自動調(diào)整，而 width: 100% 并不會直接影響其寬度。 實際上， width: 100% 在這個場景下通常會被忽略，span 元素的寬度仍然由其內(nèi)容決定。 為了更清晰地說明，我們可以添加一個父容器限制寬度：

<div style="width: 800px; background-color: aqua;">   <div style="display: inline; border: 1px solid red; padding: 10px;">     <span style="width: 50%;">這是 inline 內(nèi)的 span，寬度為 50%</span>   </div> </div>

在這個修改后的例子中，即使 span 設置了 width: 50%，它仍然會受到其 inline 父元素的影響，其最終寬度仍然取決于其內(nèi)容。

總而言之，width: 100% 的作用依賴于父元素的類型。對于 block 或 inline-block 元素，它表示占據(jù)父元素的全部寬度；而對于 inline 元素，它通常無效，元素寬度由其內(nèi)容決定。 理解這一點對于進行有效的 CSS 布局至關(guān)重要。