不使用 绝对定位 时的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】