CSS 04-EW帮帮网

浮动细学

什么是浮动

格式： float：方向（left/right）

一旦元素添加了这个属性，它会找指定方向的前一个具有改属性的元素，如果元素中的内容比如文字过多，就会环绕被浮动的元素。
浮动的特征

1.有浮动属性的元素会脱离标准文档流移动（浮）到指定的位置（动）。

2.元素浮动后，原本的位置不会被保留。

3.一行显示，浮动的元素会按照指定方向凑在一行，如果这行满了，多的元素会从下一行碰到的float元素开始。如图
如果新的浮动元素从下一个开始，它会碰到到2，所以会在2右边开始环绕。
1. 任何元素都可以浮动，不管原来的样式是什么，添加浮动后都具有行内元素特征。
2. 如果行内元素有了浮动，则不需要转换块/行内
定位
相对定位

概念：如果对一个元素进行相对定位，它将出现在它所在的位置上

格式：position: relative

条件：必须要用top/left去规定位置，才能生效。定位一旦使用，会脱离文档流。
绝对定位-无父亲定位或父亲定位

概念：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

格式：postion：absolute

条件: 必须要用top/left去规定位置，才能生效。参照物是它的上一个父辈是否有position属性，如果没有，则继续向上找，最后如果都没有则参照body。

例子：无父辈定位，body是最终父辈
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            /*position: relative;*/
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son{
            /* 绝对定位 */
            position: absolute;
            top: 30px;
            left: 30px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }

    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
```
效果如图

如果父辈有position，效果如图

可以看出，子元素的位置是由细微改变的因为如果以body为参照物，会有外边框的距离。绝对定位的用法很多。

固定定位

概念：绝对定位的参照物只有body，一旦位置确定，即使滑动页面，元素也不会移动，参考网页小广告的效果。

格式: postion:fixed

条件：必须要用top/left去规定位置，才能生效。

例子：固定位置设置一个页面两端的广告标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed{
            position: fixed;
            left: 50%;
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<div class="fixed">
    这是一个广告
</div>
<div class="w"></div>
</body>

效果如图

粘性定位

格式: postion:sticky

条件：必须要用top/left去规定位置，才能生效。

定位的对点顺序

使用原因：定位会导致元素脱离文档流，因此定位的元素会出现重叠现象，这点与浮动不停。

格式：z-index：数字数字越大优先级越高，可以为复数。一般规定：99999最大，-99999最小

练习：控制红色块最大，蓝色最下面

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left: 0;
        }

        .A{
            background-color: red;
            z-index: 99999;
        }

        .B{
            background-color: yellow;
            left: 50px;
            top: 50px;
            z-index: 1;
        }

        .C{
            background-color: deepskyblue;
            left: 100px;
            top: 100px;
            z-index: -99999;
        }
    </style>
</head>
<body>
<div class="box A"></div>
<div class="box B"></div>
<div class="box C"></div>
</body>

效果如图

如何让绝对定位水平垂直居中

根据自身width和height的值，让元素向左/上回移动一般的距离。

例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: absolute;
            left: 50%;
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div></div>
</body>

效果如图

定位对标准文档流的影响

概念：绝对定位，固定定位会压住标准文档流的内容。而浮动会让文字环绕在四周。

例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            /*定位会挡住文档流的内容*/
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div class="box"></div>
<p>I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN I M KUNKUN </p>
</body>

效果如图

我们能看到，文字被定位的元素挡住，因此使用时要注意文字的位置，可以放在定位的元素块中。

本文含有隐藏内容，请开通VIP 后查看

CSS 04

浮动细学

定位

网站公告

今日签到

热门文章

最新发布