为什么 width:100在 父元素为inline或者inline-block下 如何显示？-灵析社区

雁过留痕

#### 效果1 测试内容 这是inline-block span ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/545f34d508728d7938411b1605ef5548.png) #### 效果2 测试内容 这是inline-block span ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/0414ccbc84a9c3ef9957b0418eb047a5.png) 两段代码的区别： 第一段代码的div为inline-block,第二段为inline。 ## 问题 为什么会出现这种不同的效果 b

阅读量：13

点赞量：0

问AI
第二段, 是因为内部的行内块元素设置"width: 100%", 这个宽度的百分比是根据父元素中离他最近的"块元素"或"行内块元素"计算的, 因为第二段代码离他最近的"块"或"行内块", 是最外层的"块元素div", "div"的宽是"body", 因此他的宽也就是"body", 而他又是外层"行内元素"的内容,这也就导致外层的"行内元素"被撑开, 出现了第二个截图的样子 第二段代码, 将最外层的"div"的宽设置一下, "行内块"的宽设置为"50%"结果就非常明显了: 测试内容 这是inline-block span "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/059e571ac839986aa637f0bc05656e54.png)