css之定位 | 元素

　　css定位属性允许你对元素进行定位，也就是说它允许你定义元素框对于其正常位置应该出现的位置。css有以下三种定位机制：普通流，浮动，绝对定位。下面来分别进行说明：

一、普通流

　　普通流又称文档流，或者是标准流。指的是文档中可显示的元素在排列时候的开始位置以及它们所占的区域。又因页面中元素的种类不同，所以会按各自的特点去显示。一般是按从上到下，从左到右的顺序输出内容。

二、浮动（float）

　　1、使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是相邻的浮动元素就会停止。

　　2、基本语法:选择器{float:left/right/none}

　　3、特征:

　　　　　a、块元素可以在一行内显示

　　　　　b、按照一个指定的方向移动，遇到父级元素的边界或者是相邻的浮动元素就停止

　　　　　c、行内支持宽高

　　　　　d、脱离文档流

　　　　　　　　浮动后面跟的元素（这个元素没有浮动）的位置是从前面浮动元素的的位置开始的。

　　　　　　　　如是认为标准流标签元素是在网页平面沿x,y轴布局，那浮动就是增加一维，在z轴上实现布局。标准流标签元素坐标为（x,y,0）浮动元素坐标可看成是（x,y,z）。当x,y相同，浮动元素会覆盖标准流元素。

　　　　　　　　注：浮动不是完全脱离文档流，所以非浮动元素里的内容会留出前面浮动元素的位置（盒模型的位置）

　　　　　e、块元素默认宽度会被改变

　　　　　　　　块元素按标准来说默认撑满一行，但当块元素浮动时且块元素不设置宽度，宽度就会被内容撑开

　　　　　f、父级高度塌陷

　　　　　　子元素有浮动的时候，父级元素的高度就不会撑开

　　　　　g、换行符不会被解析成空格

　　　　　　浮动后的元素不属于文档流里的结构，所以换行，空格都和父级没有关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1,span {
            width: 200px;
            height: 200px;
            background: green;
            margin-bottom: 10px;
            float: left;
        }
        .box1{
            opacity: 0.6;
        }
       .box3{
           width: 200px;
           height: 200px;
           background: blue;
       }
       .box4{
           /* width: 200px; */
           /* height: 200px; */
           border: 1px solid red;
           float: left;
       }
       .box5{
           border: 1px solid red;
       }
       .box6{
           width: 200px;
           height: 200px;
           background: purple;
           float: left;
       }
    </style>
</head>

<body>
    <div class="box1">div1</div>
    <span  style=" background: pink;">span</span>
    <div class="box3" style="height: 300px;">我是漂亮小仙女我是漂亮小仙女我是漂亮小仙女我是漂亮小仙女</div>     <!--说明的是特征a,b,c,d-->
    <br>
    <div class="box4">box4</div>  <!--说明的是特征e-->
    <br>
    <br>
    <div class="box5">
        <div class="box6"></div>    <!--说明的是特征f-->
    </div>

</body>
</html>

　　4、float与inline-block的区别

　　　　由于浮动主要应用于：多个块元素在一行显示。float和display:inline-block都可以让元素在一行中显示，二者是有区别的，如果当元素高度不一样的情况下，想让他们按顺序排列就可以选择inline-block，但使用display:inline-block有不足那就是：盒子之间会出现间隙，无法控制，盒子在一行内位置无法调整。也可以用浮动，但用浮动的时候记得清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    ul {
        width: 300px;
        font-size: 0;
    }
    li {
        width: 100px;
        height: 100px;
        background: palegreen;
        font-size: 30px;
        text-align: center;
        line-height: 100px;
        color: white;
        /* float: left; */
        /* float: left; */
        display: inline-block;
    }
</style>

<body>
    <ul>
        <li>1</li>
        <li style="height: 300px;">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

</html>

　　5、清除浮动

　　　　　a、clear　　元素的某个方向上不能有浮动元素（left/right/both）

　　　　　b、给父级添加高度（这个只是表面上去除，当父级没有高度的情况下是用不了的，如：瀑布流）

　　　　　c、inline-block　　

　　　　　　　　具有与一上个清除浮动一样的问题，只是表面上清除，同时加了这个后元素后面就没有办法居中了

　　　　　b、overflow:hidden(超出父级的隐藏)

　　　　　　　　如果子级有定位且这个定们超出了父级的范围那样的活就看不到了

　　　　　e、空标签

　　　　　　　　空标签是没有内容但它是用于清浮动的，不太符合行为，结构，样式相分离的标准

　　　　　f、br清除浮动

　　　　　　　　不合标准

　　　　　g、after:伪类清除浮动（推荐，空标签的加强版）

　　　　　　　　after　　　　代表选择到的元素的内容的最后面

　　　　　　　　　　　　　　after伪类的内容默认是一个行内元素

　　　　　　　　content　　　设置内容

　　　　　　　　格式：选择器:after{content:";display:block;clear:both;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box1,
    .box2 {
        width: 100px;
        height: 100px;
        background: yellow;
    }

    .box1 {
        float: left;
    }

    .box2 {
        clear: both;
    }

    .box3 {

        border: 1px solid rgb(207, 236, 207);
        /* height: 100px; */
        /* display: inline-block;
    margin: 0 auto; */
        /* overflow: hidden; */

    }

    .box4 {
        width: 100px;
        height: 100px;
        background: pink;
        float: left;
        /* position: fixed; */
    }

    .box5 {
        border: 2px dotted green;
    }

    .box6 {
        width: 100px;
        height: 100px;
        background: pink;
        float: left;
    }

    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
</style>

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div> <!-- 说明的是a -->
    <br>
    <div class="box3">
        <div class="box4"></div>
        <!-- <div style="clear:both"></div> -->
        <br clear="all">
    </div> <!-- 说明的是b ,c，d,e,f-->

    <br>
    <br>

    <div class="box5  clearfix">
        <div class="box6"></div>
    </div>
</body>

</html>

三、绝对定位

　　定位同浮动一样是脱离文档流的布局方式，但定位是完全脱离文档流，浮动是不完全脱离文档流。所以它可以完全由设计者确定其位置。通过定位可以实现盒子的覆盖，但是又不影响被覆盖盒子的位置。

　　1、定位的三种常用模式

　　　　a.relative　　相对定位

　　　　　　含义：相对定位是相对于定位元素自身的原本位置，通过移动方向来移动位置，使得指定元素相对其正常的位置进行偏移。

　　　　　　移动方向：top/bottom/left/right

　　　　　　特点：只是位置有变化，元素和之前是没有变化；根据原来的位置来计算移动后的位置；不脱离文档流，元素移走后原来的位置还是会保留；加上相对定位后对原来的元素本身没有影响；可提升层级

　　　　　　用处：一般用于微调，和绝对定位配合使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 200px;
        height: 200px;
        background: yellow;
        color: white;
    }

    div:nth-child(1) {
        background: green;
    }

    div:nth-child(2) {
        background: pink;
        position: relative;
        /* 相对定位 */
        left: 20px;
        /* 移动方向 */
        top: 20px;
        margin: 10px;
        /*  margin和padding问题影响布局 */
        padding: 10px;
    }
</style>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>

</html>

　　　　b .absolute　　绝对定位

　　　　　　含义：相对于body或者某个定位流中的袓先元素来定位

　　　　　　　　　绝对定位如果它的父元素设置了除static之外的定位，那么它就会相对于它的父元素来定位，位置是通过left,top,bottom,right属性来规定，如果它的父元素没有定位，那它就得看它父元素的父元素是否有除static外的定位，如果没有继续向外向上类推，总之，它的定位就是相对于设置了除static定位外的第一个袓先元素。如果所有的袓先元素都没有除static外的定位，那就是相对于文档body来定位（并非相对于浏览器窗口）

　　　　　　移动方向：top/bottom/left/right

　　　　　　特点：完全脱离文档流；行内元素支持所有样式（与加上浮动或者是inline-block的效果是一样的）；如果父级有定位那位置根据父级移动，如果父级没有定位，那位置根据可视区域移动（相对于body定位会随意页面的滚动而滚动）；提升层级；触发BFC

　　　　　　用处：一般配合相对定位来使用，父元素相对定位保留位置，不影响后续元素位置，子元素绝对定位，相对于父元素定位实现位置移动。

　　　　　　居中对齐问题：定位的盒子，margin:0 auto会失效。

　　　　　　　　　　　　　水平居中可使用：left:50%;margin-left:-width/2px

　　　　　　　　　　　　　垂直居中可使用：top:50%;margin-top:-height/2px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div,span{
        width: 200px;
        height: 200px;
        background: yellow;
        color: white;
    }

    div:nth-child(2) {
        background: green;
        position: absolute;
        top:400px;
    }

    div:nth-child(3) {
        background: pink;
        position: absolute;
        left: 200px;
        top:400px;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;         /* 居中问题 */
    }
    span{
        position: absolute;
        background: chartreuse;
    }

</style>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span</span>
</body>

</html>

　　　　c.static　　静态定位

　　　　　　一般的标签元素不加任何定位都是属于静态定位，在页面的最底层属于标准流。

　　　　d.fixed　　固定定位

　　　　　　固定定位可以让某个盒子不随着滚动条的滚动而滚动。如：对联广告，回到顶部按钮等

　　　　　　移动方向：top/bottom/left/right

　　　　　　特点：完全脱离文档流；行内元素支持所有样式；提升层级；触发BFC

　　　　　　用处：让某个盒子不随着滚动条的滚动而滚动

　　补充知识点：

　　　　可视区：相让一个元素的宽高撑满整个屏幕，就要给这个元素的所有父级的宽度设置为100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        div{
            height: 100%;
            /* border: 1px solid pink; */
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

　　　　层级：z-index（层级）的大小由顺序来定，后面元素的层级要比前面元素的层级高

　　　　　　　　有定位元素的层级要比没有定位元素的层级要高

　　　　　　　　在都有定位的情况下，层级还是取决于书写顺序

　　　　　　　　它的值是一个数字，数字越大层级越高（在同一个层里）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width:200px;
                height:200px;
                background:blue;
                color:#fff;
                position:relative;
                }
            .div1{
                /*position:relative;*/
                z-index:2;
            }

            .div2{
                width:150px;
                background:green;
                margin-top:-50px;
                z-index:1;
            }
            /*span{
                background:yellow;
                color:#FFF;
                width:100px;
                height:100px;
                display:block;
                margin-top:-50px;
            }*/
        </style>
    </head>
    <body>
        <div class="div1">davina1</div>
        <div class="div2">divina2</div>
        <!--<span>span</span>-->

    </body>
</html>