定位的补充

固定定位和绝对定位和浮动类似

行内元素添加了固定（绝对）定位之后也变成了行内块元素可以直接设置高度和宽度
块级元素也会被转换成行内块元素，不设置高度和宽度就是内容的宽度和高度。
和浮动一样，脱离了标准流，是不会引起外边距塌陷的。

值得吐槽的一点

学习了些许h5一段时间，发现指定css规则的人，让我的强迫症难以忍受了，一些规则简直就是一拍脑门就规定的。

绝对定位和固定定位与浮动的不同

前面学习的浮动，虽然也脱离标准流了，我们的盒子浮动上去盖住盒子，但是不会压住内容（图片，文字）。

但是绝对固定定位，盖住盒子会完全盖住盒子的内容（文字和内容）。

<style>
    .F {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .A {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
</style>

<body>
    <!-- <div class="F">浮动</div> -->
    <div class="A">绝对</div>
    <p>我想吐槽</p>
</body>

吐槽完了，其实想想这样也挺方便，这个和word文档图片布局差不多

浮动其实就是文字和图片的环绕布局，而固定（绝对）定位就是衬与文字上方。

绝对（固定）定位水平居中

没有定位的盒子水平居中我们只需要盒子有宽度外加margin:0 auto;就可以水平定位

但是绝对定位，absolute，是脱标的，那如何水平居中呢？

解决办法也简单，就是定位走页面的50% 再加盒子一般的负的外边距

    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
            left: 50%;
            margin-left: -100px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

垂直居中也是一样的。固定定位也是一样的啦。