绝对定位注意点

块级元素与绝对定位

最新推荐文章于 2022-03-16 14:10:38 发布

转载最新推荐文章于 2022-03-16 14:10:38 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Liujunyan/p/4982775.html

解释块级元素在未设置宽度时如何占据父元素的100%，并讨论设置绝对定位后的影响。

块级元素不设置宽度时默认占父元素的100%~如果块级元素没有设置大小~同时又给该块级元素设置了绝对定位~那它会缩成一个点~下面一段代码：

<!DOCTYPE html>
<html>
    <head ln="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
        <title>hehe</title>
        <style>
            .div1 {
                background-color: #c0c;
            }
            .div2 {
                border: 1px solid red;
            }
            .div3 {
                height: 32px;
                width: 32px;
                border:1px solid lightgreen;
            }
        </style>
    </head>
    <body id="main">
        <div class="div1">
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
    </body>
</html>

运行结果如下：

可以看到~父元素没有设置大小~未设置大小的子元素的宽占满整个父元素的宽~设置了大小的子元素则按设置的大小显示

如果给父元素加一个绝对定位~修改如下：

<!DOCTYPE html>
<html>
    <head ln="en">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
        <title>hehe</title>
        <style>
            .div1 {
                background-color: #c0c;
                position: absolute;/*设置父元素为绝对定位*/
            }
            .div2 {
                border: 1px solid red;
            }
            .div3 {
                height: 32px;
                width: 32px;
                border:1px solid lightgreen;
            }
        </style>
    </head>
    <body id="main">
        <div class="div1">
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
    </body>
</html>

运行结果为：

父元素没有设置大小~此时如果把定位设为绝对定位~那原本父元素应该会缩到左上角变为一个点~但是因为父元素的子元素总有一个子元素设置了大小~所以父元素缩小到刚好包住子元素就不能在缩小了

转载于:https://www.cnblogs.com/Liujunyan/p/4982775.html