为了账号安全,请及时绑定邮箱和手机立即绑定

子元素采用absolute定位,父元素没有设置高度,可是为什么仍然子元素会被撑开?

/ 猿问

子元素采用absolute定位,父元素没有设置高度,可是为什么仍然子元素会被撑开?

shine62 2019-03-05 18:50:28

如果我没有设置绝对定位的话,不给html,body设置{height:100%,weight:100%}时,单独的给下面包裹的div设置height,width:50%时,div的高度是有里面的字体撑开的,它的高度不是窗口的一半。

按照我们理解的那样,以百分比的形式给某个元素设置高度时,它是继承上一级父元素的高度。
可是absolute,在以body做爹爹的时候,body的高度也是没有设定的呀,为什么就可以占满屏幕的一半呢?

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
       body{background:yellow;}
        div {
            height: 50%;
            width: 50%;
            background: red;
            color: white;
            position: absolute;
        }

    </style>
</head>
<body>
<div>
    你是最棒的哦!
</div>
</body>
</html>

如图:

https://img3.mukewang.com/5c7e53f60001e14206050567.jpg

去掉absolute之后:

https://img2.mukewang.com/5c7e540d000130a405530547.jpg

为什么添加absolute之后就可以自动充满屏幕的一般呢?

而如果没有absolute的话,高度是自适应文字的,它自己给定高度无效,这点可以明白,上面不太懂。

查看完整描述

1 回答

?
带咸鱼

body默认就是整个窗口啊 那里面div就占一半了啊   不设absolute那啥没有宽高了就内容撑开 设了就默认参照body的宽高

查看完整回答
反对 回复 2019-03-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信