为什么 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%, 这个宽度的百分比是根据父元素中离他最近的块元素或行内块元素计算的, 因为第二段代码离他最近的块或行内块, 是最外层的块元素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 2

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