CSS 定位机制

CSS 的定位机制有3种：普通流（标准流）、浮动和定位。

1 普通流或标准流：就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。

2 浮动：指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

基本语法如下：选择器 {float:属性值}

属性值：left、right 。

浮动特性：不占位置，会影响标准流，浮动只能左右，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

　　　　　一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

浮动的目的是为了让多个块级元素同一行显示。最核心的关键点就是怎么排列的，是否占有位置。

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动。

三个字来总结下：浮 漏 特

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏：加了浮动的盒子，不占位置，它浮起来了， 它原来的位置漏给标准流的盒子。

特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性。

示例来说用下用途。

<html>
    <head>
        <style>
            .father {
                width:400;
                height:200; # 占位置，当up和down浮动时，就会将这个位置占用
            }
            .up {
                width:200px;
                height:200px;
                background-color:red;
                float:left;
                
            }
            .down {
                width:200px;
                height:200px;
                background-color:black;
                float:left;
            }
            .xiamian {
                width: 400px;
                height:200px;
                background-color:pink; 
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="up">123</div>
            <div class="down">456</div>
        </div>
        <div class="xiamian">789</div>
    </body>
</html>

 

posted @ 2018-08-21 16:34  会开车的好厨师  阅读(96)  评论(0)    收藏  举报