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

如果我没有设置绝对定位的话，不给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>

如图：

去掉absolute之后：

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

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

shine62

浏览 7384回答 1

1回答

带咸鱼

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

0 0

随时随地看视频慕课网APP