CSS布局中width:100%的陷阱：父元素显示类型的关键作用
在CSS布局中，width:100%并非总是如预期般工作。其最终效果高度依赖于父元素的display属性。本文将重点分析父元素为inline或inline-block时，子元素设置width:100%所产生的差异。
代码示例及分析
我们通过两个示例来对比不同父元素display属性下的效果：
示例一：父元素为inline-block
测试内容这是inline-block父元素 这是子元素span
在此示例中，inline-block父元素的宽度由其内容决定。子元素span的width: 100%会使其占据父元素的全部宽度。
示例二：父元素为inline
测试内容这是inline父元素 这是子元素span
与示例一不同，inline父元素的宽度仅与其内容文本宽度一致。然而，width: 100%应用于span子元素时，会根据最近的块级祖先元素（通常是body）计算宽度，导致span撑开父元素，甚至影响页面布局。
验证与拓展
为了更清晰地展现这一特性，我们可以对父元素或子元素的宽度进行调整：
测试内容这是inline父元素 这是子元素span
这里，我们将父元素div的宽度限制为800px，并设置span的宽度为50%。结果显示，span的宽度会根据父元素div的宽度计算，而非body的宽度。
总结：width: 100%的计算基准取决于父元素的display属性。对于inline-block父元素，width: 100%基于父元素内容宽度；而对于inline父元素，width: 100%则基于最近的块级祖先元素宽度，这常常会导致意想不到的布局结果。 因此，在使用百分比宽度时，务必关注父元素的display属性，并根据实际需求选择合适的布局方式。
