當父元素為inline或inline-block時，子元素設置width: 100%會有什么不同的顯示效果？

width: 100% 在不同父元素下的顯示差異分析

學習html和css時，width: 100% 在不同父元素下的行為常常令人困惑。本文將深入探討當父元素為inline或inline-block時，子元素設置width: 100% 的顯示效果差異。

問題場景

讓我們對比以下兩種HTML和CSS代碼片段：

場景一：父元素為 inline-block

<div>   <div style="height: 100px;">測試內容</div>   <div style="display: inline-block; border: 1px solid red; padding: 10px;">     這是inline-block元素   </div> </div>

場景二：父元素為 inline

<div>   <div style="height: 100px;">測試內容</div>   <div style="display: inline; border: 1px solid red; padding: 10px;">     這是inline元素   </div> </div>

兩段代碼的關鍵區別在于內部 div 元素的 display 屬性：inline-block 與 inline。

效果差異及原因解釋

在場景一中，父元素為 inline-block，子元素的 width: 100% 基于父元素的寬度計算。由于 inline-block 元素的寬度會根據內容自適應，因此子元素能完美填充父元素。

然而，在場景二中，父元素為 inline，情況就不同了。width: 100% 的計算參考離它最近的塊級或行內塊級祖先元素。這里，最近的塊級祖先元素是外層 div，其寬度受內容影響而變化。 因此，inline 子元素會試圖占據整個父元素的寬度，導致父元素被撐開，從而出現與預期不同的布局效果。

為了更清晰地說明，我們可以修改場景二的代碼：

<div style="width: 800px; background-color: aqua;">   <div style="height: 100px;">測試內容</div>   <div style="display: inline; border: 1px solid red; padding: 10px; width: 50%;">     這是inline元素   </div> </div>

通過設置外層 div 的固定寬度，并調整子元素寬度為 50%，我們可以更直觀地觀察到 inline 元素如何影響父元素的布局。

結論

使用 width: 100% 時，務必注意父元素的 display 屬性。 inline 父元素會因為子元素的 width: 100% 而產生意想不到的布局結果。 為了避免此類問題，建議盡量避免在 inline 元素中使用 width: 100%，或者將父元素的 display 屬性改為 block 或 inline-block。