父元素为 inline 或 inline-block 时子元素 width: 100% 显示差异的原因

在前端开发中，常常会遇到一些看似奇怪的样式显示问题，其中父元素为 inline 或 inline-block 时，子元素设置 width: 100% 所呈现出的差异，就是一个值得深入探讨的现象。

当父元素的 display 属性为 inline 时，它会根据内容的宽度自适应大小，并且不会换行。此时如果子元素设置 width: 100%，这 100% 是相对于什么呢？实际上，由于 inline 元素没有宽度的概念（它的宽度由内容决定），子元素的 width: 100% 在这里是无效的，它无法扩展到占据父元素的宽度，而是依然按照自身内容的宽度来显示。例如一段内联文本作为父元素，其中包含一个设置 width: 100% 的 <span> 子元素，这个 <span> 并不会铺满父元素的宽度，而是仅包裹自身的文本内容。

而当父元素的 display 属性为 inline-block 时，情况就有所不同。inline-block 元素兼具 inline 和 block 的特性，它既可以与其他元素在同一行显示，又可以设置宽度和高度。此时子元素设置 width: 100%，这个 100% 是相对于父元素的宽度。也就是说，子元素会扩展到填满父元素的宽度。比如一个 inline-block 类型的 <div> 作为父元素，内部有一个设置 width: 100% 的 <p> 子元素，那么这个 <p> 元素就会与父元素 <div> 的宽度相同。

这种差异的根本原因在于 inline 和 inline-block 元素对宽度的处理方式不同。inline 元素专注于内容布局，宽度随内容变化，无法为子元素提供可参照的固定宽度；而 inline-block 元素有独立的宽度空间，子元素能够基于这个空间进行宽度的百分百填充。了解这一特性，有助于开发者在页面布局时做出更合理的样式选择，避免因误解导致的显示异常问题，提升前端开发的效率和质量。