CSS样式-固定定位以及能脱离标准流的总结

fixed：固定定位

1.脱离标准流，不和滚动条一起滚动

2.偏移起作用：top right bottom left 

3.不受父元素的影响（即使父元素的定位是relative），只依据浏览器的可视区定位。

4.当一个元素被设定为固定定位时，会产生模式转换，转化为行内块元素，所以如果开始没有设定宽度，那么设定固定定位后宽度为最小

 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 44px;
            background: url(images/top.png) no-repeat top center;
            position: fixed;
            /* 当一个元素被设定为固定定位时，会产生模式转换，转化为行内块元素，所以如果开始没有设定宽度，那么设定固定定位后宽度为最小 */
            width: 100%;
            /* 设定完fixed或者absolute以后，一定要设置top和left */
            top: 0;
            left: 0;
        }

        .box {
            margin: 0 auto;
            width: 1002px;
　　　/*如果不设定margin-top: 44px; .box上部分会被.top盖住，因为.top脱离了标准流，下面的元素会向上占位*/
            margin-top: 44px;
        }

        .ad-l, .ad-r {
            position: fixed;
            top: 100px;
        }

        .ad-r {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="box">
        <img src="images/box.png" />
    </div>
    <img src="images/ad-l.png" height="288" width="120" class="ad-l" />
    <img src="images/ad-r.png" height="288" width="120" class="ad-r" />
</body>
</html>

 

 

总结1：能脱离标准流的：浮动，  absolute，  fixed

总结2：所有脱离标准流的动作，都会触发模式转换，对应元素变为行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
        div {
            height: 100px;
            background-color: #f00;
　　　/*加了浮动后，页面不再展示任何东西；如果在div中加些内容的话，则内容有多宽则展示多宽*/
           /*float: left;*/
　　　/* position: absolute; */
            position: fixed;
        }
    </style>
</head>
<body>
    <div>AAAAAAAAAAAAAAAAAAAAAAAA</div>
</body>
</html>

 

posted @ 2021-03-20 16:11  #Friday  阅读(276)  评论(0)    收藏  举报