web前端的position定位及元素居中方式

position定位方式

1.position:static 无定位（默认值）
(1).元素出现在正常文档流（top、right、left、bottom等属性不使用）
(2).当没有对一个元素指定定位时，使用static（默认），也就是按照文档的流式（flow）定位，将元素放到合适位置
(3).在不同分辨率下，采用流式布局可以很好地自适应，取得较好布局
2.position：inherit 继承父元素的定位方式
3.position：relative 相对定位
(1).不影响元素本身特性，没有偏移量时对元素无影响
(2).相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间（虽然他现在已经不在本来的位置了）
(3).相对于其正常位置进行定位。元素的位置通过偏移值（“left”、“top”、“right”、“bottom”）进行规定
(4).提升层级，用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值大者在上面

#id1{
    width:300px;
    height:300px;
    background-color:chartreuse;
    position:relative;
    left:20px;
}
#id2{
    width:300px;
    height:300px;
    background-color:cornflowerblue;
}

4.position:absolute 绝对定位
(1).使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充
(2).使内联元素在设置宽高的时候支持宽高，区块元素在未设置宽度时由内容撑开宽度（改变元素的特性）
(3).相对于 static 定位以外的第一个祖先元素进行定位（其父元素没有定位则逐层上找，直到document）。元素的位置通过偏移值进行规定
(4).提升层级，用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值大者在上面

#id1{
    width:300px;
    height:300px;
    background-color:chartreuse;
    position:absolute;
    left:20px;
}
#id2{
    width:300px;
    height:300px;
    background-color:cornflowerblue;
}

5.position:fixed 固定定位
(1).元素的表现类似于将 position 设置为 absolute，不过其包含块是视窗（window）本身
(2).定位效果类似之前学过的固定背景，元素与视窗始终相对静止。元素的位置通过偏移值进行规定
(3).提升层级，用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值大者在上面
6.z-index:99 z轴的顺序
(1).当网页上出现多个定位所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面
(2).x轴和y轴决定网页平面，z轴则是垂直于屏幕的虚拟坐标轴，浮动层在这个坐标轴上的顺序号就决定了谁上谁下
(3).定位才可以触发z-index属性，它没有单位，并可拥有负的属性值。默认值为0

position:relative和负margin都可以使元素位置发生偏移，有什么区别？
(1).相对定位可以使元素发生偏移，但是在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化
(2).通过负margin偏移的元素会放弃偏移前占据的空间，后面的其它元素就会“流”过来填充，所以它们位置发生了变化

元素居中方式

1.行内块级元素垂直居中
基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块垂直居中于容器中央

     #parent{
        width:300px;
        height:300px;
        background-color:greenyellow;
    }
    #son{
        width:200px;
        height:200px;
        background-color:cornflowerblue;
    }
    #parent::after,#son{
        display:inline-block;
        vertical-align:middle;
    }
    #parent::after{
        content:'';
        height:100%;
    }

2.行内块级元素水平居中
如果“margin-left”和“margin-right”都是“auto”，那么它们的使用值是相等的。它将元素相对于包含块的边缘水平居中（要求子元素比父元素小，且只能做水平方向的居中）

.son{margin:0 auto;}

3.使用CSS3中新增的transform属性和position, 实现水平和垂直居中

     #parent{
        width:300px;
        height:300px;
        background-color:greenyellow;
    }
    #son{
        width:200px;
        height:200px;
        background-color:cornflowerblue;
        position:relative;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }

4.使用定位position和负的margin来实现水平和垂直居中

     #parent{
        width:300px;
        height:300px;
        background-color:greenyellow;
        position:absolute;
    }
    #son{
        width:200px;
        height:200px;
        background-color:cornflowerblue;
        position:relative;
        left:50%;
        top:50%;
        margin-left:-100px;
        /*margin-left: -0.5固定宽 */
        margin-top:-100px;
        /* margin-top:-0.5固定高 */
    }

5.使用position定位方式, 以及left:0;right:0;margin:0 auto; —支持水平和垂直居中

    #parent{
        width:300px;
        height:300px;
        background-color:greenyellow;
        position:absolute;
    }
    #son{
        width:200px;
        height:200px;
        background-color:cornflowerblue;
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        margin:auto;
    }

6.利用弹性盒模型

        #parent{
            width:300px;
            height:300px;
            background-color:chartreuse;
            position:absolute;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        #son{
            width:200px;
            height:200px;
            background-color:cornflowerblue;
        }