父元素为inline或inline-block时，子元素设width: 100%显示效果不同的原因

在前端开发中，常常会遇到这样的疑惑：当父元素分别设置为 inline 或 inline-block 时，子元素设置 width: 100% 为何显示效果大相径庭？这背后蕴含着CSS布局的一些关键原理。

首先来了解 inline 元素的特性。inline 元素，如 <span> 标签，它不会换行，宽度和高度由内容决定，并且不会影响其周围元素的布局。当父元素是 inline 时，为子元素设置 width: 100% 不会生效。这是因为 inline 元素没有固定的宽度概念，它的宽度随着内部内容的变化而变化。此时子元素的宽度会根据自身内容自适应，而不是充满父元素的宽度。比如，一个 <span> 父元素里有一个设置了 width: 100% 的 <div> 子元素，<div> 不会扩展到占满 <span> 的宽度，而是保持自身内容的宽度。

接着看 inline-block 元素。inline-block 结合了 inline 和 block 元素的特点。它既不会换行，像 inline 元素一样与其他元素在一行显示，又可以设置宽度和高度，类似 block 元素。当父元素为 inline-block 时，子元素设置 width: 100% 是可以生效的。这是因为 inline-block 有了明确的宽度范围，子元素基于这个范围去计算宽度。例如，一个设置了固定宽度的 <span style="display: inline-block; width: 200px;"> 作为父元素，内部 <div style="width: 100%;"> 子元素就会准确地占据这200px 的宽度。

理解这种差异对于前端布局至关重要。在实际开发中，若想实现子元素宽度占满父元素宽度的效果，父元素应避免使用 inline 类型，而优先考虑 inline-block 或 block 等具有固定宽度概念的类型。这也提醒开发者在进行CSS布局时，要充分考虑元素的显示类型及其特性，从而构建出符合预期的页面布局。