绝对定位注意点

块级元素不设置宽度时默认占父元素的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>

运行结果为：

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

posted @ 2015-11-21 00:37  Liujunyan_x  阅读(251)  评论(0)  编辑  收藏  举报