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

最新推荐文章于 2022-08-05 15:50:36 发布

jojo付啾啾

最新推荐文章于 2022-08-05 15:50:36 发布

阅读量4.8k

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/DreamFJ/article/details/69666781

版权

CSS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

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

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

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

jojo付啾啾

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
元素宽高以百分比设置时的大小相对谁来确定

今天在做一个demo的时候有一个地方遇到一个问题，想实现小星星bling bling的效果，在我设置background-size由100%变为50%的时候，发现小星星变成了巨星！！震惊！！！因为我的小星星是以背景图片放在一个div (class=”inner”)里，然后嵌套在另外一个div (class=”outer”)里，我给.outer设置了宽和高，然后我想小星星的background-siz
复制链接

扫一扫