问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
tjh1998
    0112
    新手上路，请多包涵

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

    div {
        height: 50%;
        width: 50%;
        background: red;
        color: white;
        position: absolute;
    }
   
</style>

    </head>
    <body>
    <div>

    你是最棒的哦！

    </div>
    </body>
    </html>
    如图：
    图片描述
    假如换成了position:relative的话，或者去掉absolute的话，
    图片描述

    没想明白，body既然没有设置高度，那么absolute是怎么做到占据窗口的一半呢？

    css
    阅读 11k
    3 个回答
    得票最新
    头像
    Teletubbies
      557128

      MDN上对于absolute的解释

      相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）

      因为你这里div的祖先元素（body和html）全是static定位，所以这个div只能相对于初始包含块定位，其大小就是视口viewpoint的大小，height:50%则会占据整个视口高度的1/2。

      头像
      helloworld_
        3k2822
        头像
        易函123
          1.2k2622

          第一种情况：

            body,html{
      position: relative;
  }
* {
        margin: 0;
        padding: 0;
    }

    div {
        height: 50%;
        width: 50%;
        background: red;
        color: white;
        position: absolute;
    }

          这个时候div以body，html的宽高为标准；

          第二种情况：

          * {
        margin: 0;
        padding: 0;
    }
    

    div {
        height: 50%;
        width: 50%;
        background: red;
        color: white;
        position: absolute;
    }

          div absolute已经脱离文档流，是以视口的宽高为标准

          第三种情况

          * {
        margin: 0;
        padding: 0;
    }
    

    div {
        height: 50%;
        width: 50%;
        background: red;
        color: white;
        position: relative;
    }

          这时 div以html和body为标准，但是里面的文字将div撑开了，才会出现这种情况；
          如果去掉文字，就会和第一种情况类似。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏