您的位置：首页 > Web前端 > CSS

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

2017-04-08 13:25 447 查看

今天在做一个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;
}

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航