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。
