定位

定位的原理：
在文本流中，任何一个标签都被文本流限制了自身的位置，但是通过CSS我们依然使得这些标签可以改变自己的位置，通过float来让标签浮动，也可以通过margin来让标签产生位置移动。
CSS定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对父标签、甚至浏览器窗口本身的位置。定位的位置值可以是left right top bottom。元素坐标点（left top） （right bottom）
定位的属性名 position；
定位的类型：
1.static 静态定位（默认值）相当于标准文本流
2.relative 相对定位 相对定位使元素发生位置变化，以自身的初始值左上角作为参考，并没有脱标还保留自身的位置 作用 微调元素的位置 相当于外边距 但是不会影响其余元素的位置还是有层次感；
3.绝对定位：绝对定位大元素 会以距离最近的拥有定位属性（不包含static）的父级元素的左上角作为参考放置，并不会占据原来的位置 脱离标准流 随着滚动条发生变化
4.固定定位：脱离标准流 参考位置就是body左上角 随着滚动条不发生变化

定位类型	位置变化	脱离标准	参考值	位置值
static	没有	不脱标（默认值）	无	left right top bottom
relative	有	不脱标（保留原来位置）	自身原来位置	left right top bottom
absolute	有	脱标（不保留原来位置）	以最近的拥有定位（不包含static）属性的父级元素左上角	left right top bottom
fixed	有	脱标（不保留原来位置）	以浏览器窗口左上角	left right top bottom

1.定位居中

div {

width:200px;
height:300px;  // 此方法的缺点是必须知道此盒子具体的宽高
position:fixed/absolute;

left:50%;  //向右移动父盒子宽度的一半 
top:50%;//向下移动父盒子宽度的一半 
margin-left: -w/2; // 向左移动自身宽度的一半
margin-top:-h/2;

}
.center {

    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin: auto;
    /* 必须要知道子元素的宽高和刚刚的方法是一样的作用 */
    width: 200px;
    height: 200px;
    background-color: skyblue;
    
}