元素宽高以百分比设置时的大小相对谁来确定

来源：互联网发布：yum 安装lnmp 编辑：程序博客网时间：2024/05/21 10:25

今天在做一个demo的时候有一个地方遇到一个问题，想实现小星星bling bling的效果，在我设置background-size由100%变为50%的时候，发现小星星变成了巨星！！震惊！！！

因为我的小星星是以背景图片放在一个div (class=”inner”)里，然后嵌套在另外一个div (class=”outer”)里，我给.outer设置了宽和高，然后我想小星星的background-size以百分比设置的时候其大小是以.outer来确定的，查看W3C的标准也是以父元素的百分比来设置背景图像的宽度和高度。。。可是我的怎么就不行呢？？

原因就是基于demo需要我给我的.inner设置了绝对定位，position:absolute;但是.outer是没有定位的，所以导致我的小星星不是以.outer来确定大小的。

这让我想到了我以前学习的，当元素设置为绝对定位时，该元素是以“最近的已定位的祖先元素的padding起点”为原点进行定位的，如果都没定位则以body定位。所以我猜大小也是这样确定的。下面来试试吧~

body部分：

<body>    <div class="outer">        <div class="inner">            <p></p>        </div>    </div></body>

情况一：大家都是默认定位
css部分：

<style> *{    margin:0;    padding:0;}.outer{    width: 200px;    height: 100px;    border: 3px solid red;}.inner{    width: 100px;    height: 100px;    border: 2px solid yellow;}p{    width: 50%;    height: 50%;    border: 1px solid;}</style>

分析：此时大家都没有设置定位，所以p元素的宽和高是以直接父元素即.inner来确定大小的。
结果：
这里写图片描述

情况二：就最里面的p元素设置position为absolute或fixed，此时p的大小是相对body确定，因为两个父元素都没有设置定位。当设置position为relative时与情况一的结果一样。
css部分（只有p元素的样式改变）：

p{    position: absolute;/*绝对定位*/    width: 50%;    height: 50%;    border: 1px solid;}

结果：
这里写图片描述

情况三：直接父元素没有设置定位，.outer设置了定位（relative, absolute或fixed），此时p元素的大小是以.outer来确定的。
css部分（p元素和.outer的样式改变）：

.outer{    position: relative;    width: 200px;    height: 100px;    border: 3px solid red;}p{    position: absolute;/*绝对定位*/    width: 50%;    height: 50%;    border: 1px solid;}

结果：
这里写图片描述

情况四：直接父元素设置定位，设置其position为relative或absolute或fixed，则p元素以直接父元素确定大小。
css部分：

*{    margin:0;    padding:0;}.outer{    width: 200px;    height: 100px;    border: 3px solid red;}.inner{    position: relative;    width: 100px;    height: 100px;    border: 2px solid yellow;}p{    width: 50%;    height: 50%;    border: 1px solid;}

结果与情况一的结果一样。

总结：当元素以百分比设置宽高时，该元素是以“最近的已定位的祖先元素”来确定大小的。与元素定位很相似。

0 0