定位的补充

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

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

值得吐槽的一点

学习了些许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>

image-20201230211335928

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

image-20201230211659301

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

绝对(固定)定位水平居中

没有定位的盒子水平居中 我们只需要 盒子有宽度 外加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>

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

结语

假期的第四天
微信小程序

Q.E.D.


努力学习的小菜鸟