正确使用“width:100%“

不使用 绝对定位 时的width:100%;

这是一个div，里面没有任何的元素。等会要加入内容div

    <div
      style="
        height: 120px;
        width: 200px;
        margin: 20px;
        border: 30px solid rgb(216, 186, 89);
        padding: 40px;
        background-color: yellow;
      "
    >
</div>

可以看到上图，这是对应的结构。接下来加入内容div

 <div
      style="
        height: 120px;
        width: 200px;
        margin: 20px;
        border: 30px solid rgb(216, 186, 89);
        padding: 40px;
        background-color: yellow;
      "
    >
      <div
        style="
          height: 100%;
          width: 100%;
          background-color: pink;
          color: tomato;
          border: 5px solid yellowgreen;
        "
      >
        100%div
      </div>
    </div>

发现了什么 ？元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域

使用 绝对定位 时的width:100%;

问题：如果对子盒子使用绝对定位width 会不会有不一样 ？
代码如下

 <div
      style="
        height: 120px;
        width: 200px;
        margin: 20px;
        border: 30px solid rgb(216, 186, 89);
        padding: 40px;
        background-color: yellow;
        position: relative;   //设置父盒子为相对定位
      "
    >
      <div
        style="
          height: 100%;
          width: 100%;
          background-color: pink;
          color: tomato;
          border: 5px solid yellowgreen;
          position: absolute;
        "
      >
        100%div
      </div>

发现了什么？ width 变成了设置了relation的盒子的宽度，这里也就是父盒子，父盒子的大小是啥？padding + content = width，这是父盒子的宽度。
答案 ： width : 100%在使用绝对定位的情况下，width 为设置了relation的盒子的宽度

小案例：

  <div
      style="position: relative; padding: 30% 45%; background-color: pink; border: 1px solid pink"
    >
      <iframe
        style="position: absolute; width: 100%; height: 100%"
        src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0"
        frameborder="no"
        scrolling="no"
      ></iframe>
    </div>
    //这段代码学自 https://www.cnblogs.com/wkfvawl/p/12268980.html

巧妙的使用padding为div设置了盒子的大小（当然包括了padding），然后在后面的使用width : 100%; height: 100%; 让iframe 和父级div大小一样。

史上评分最高游戏，什么叫做天下第一！(2010-2019)【Top20】