前端 - 为什么 width:100在 父元素为inline或者inline-block下 如何显示？

Question

效果1

  <div>        <div style="height: 100px;">测试内容</div>        <div style="display: inline-block;border: 1px solid red;padding: 10px;">            <span style="display: inline-block; border: 2px solid green; width: 100%;background-color: yellow;"> 这是inline-block span</span>        </div>    </div>

效果2

<div>        <div style="height: 100px;">测试内容</div>        <div style="display: inline;border: 1px solid red;padding: 10px;">            <span style="display: inline-block; border: 2px solid green; width: 100%;background-color: yellow;"> 这是inline-block span</span>        </div>    </div>

两段代码的区别： 第一段代码的div为inline-block,第二段为inline。

问题 为什么会出现这种不同的效果

b

Answer 1

个人想法，不保证正确
width: 100%，百分比是相对于最近的包含块，https://www.zhihu.com/question/36079531，主要是要怎么理解“包含块”这个词
效果1，span的百分比相对于包含块（父元素）的宽度，没什么问题
效果2，span的父元素是inline，不算包含块，因此百分比相对的是最外层div元素

Answer 2

第二段, 是因为内部的行内块元素设置width: 100%, 这个宽度的百分比是根据父元素中离他最近的块元素或行内块元素计算的, 因为第二段代码离他最近的块或行内块, 是最外层的块元素div, div的宽是body, 因此他的宽也就是body, 而他又是外层行内元素的内容,这也就导致外层的行内元素被撑开, 出现了第二个截图的样子

第二段代码, 将最外层的div的宽设置一下, 行内块的宽设置为50%结果就非常明显了:

<div style="width: 800px; background-color:aqua;">  <div style="height: 100px;">测试内容</div>  <div style="display: inline;border: 1px solid red;padding: 10px;">    <span style="display: inline-block; border: 2px solid green; width: 50%;background-color: yellow;"> 这是inline-block      span</span>  </div></div>

Answer 3

这种不同的效果是由于 display 属性的不同设置所导致的。

在第一段代码中，外层的 div 使用了 display: inline-block;，这意味着它被视为块级元素，但仍然保留了一些行内元素的特点。在这种情况下，width: 100%; 在 span 元素上会将其宽度设置为与包含块相同，即 div 元素的宽度。由于 div 元素是 inline-block 类型，它的宽度默认为内容的宽度，因此 span 元素的宽度也被设置为内容的宽度。

而在第二段代码中，外层的 div 使用了 display: inline;，这意味着它被视为行内元素。在这种情况下，span 元素的宽度设置 width: 100%; 将不会影响其宽度，因为行内元素的宽度默认为内容的宽度，并且不能通过设置 width 属性来改变。因此，span 元素的宽度将根据其内容进行调整。

这就是为什么在两种情况下会出现不同的效果。