css中定位

最新推荐文章于 2024-04-12 05:28:38 发布

Soulfom

最新推荐文章于 2024-04-12 05:28:38 发布

阅读量257

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Soulfom/article/details/104477349

版权

一、定位

定位的意思是定位元素在网页中的位置。

什么元素该出现在什么位置，比如网页中的右下角小广告，csdn导航栏的固定位置都是通过定位实现的。

二、css的定位机制

css的定位机制分为三种：普通流（文档流）、float浮动、position

普通流（文档流）：

没有给元素添加特殊定位的称为普通流（文档流）。在元素在排版布局中，默认块级元素上下排列（独占一行），行内元素左右排列。

float浮动：

使块级元素能够在同一行内左右排列。

属性值：left（元素在父元素中从左往右浮动） right（元素在父元素中从右往左浮动）none（默认值元素不浮动）inherit（从父元素继承浮动属性）

给元素设置浮动后该元素将脱离文本流，其他元素向上移动补位.。即设置浮动的元素不占空间。！

给box1和box2设置浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            border: 1px red solid;
        }
        /--给box1和box2设置浮动--/
        .box1{
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: skyblue;
            float: left;
        }
        /--因为box3没有设置浮动，所以在网页中box3往上顶在box1和box2下面被覆盖掉--/
        .box3{
            width: 100px;
            height: 100px;
            background: silver;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

给box3设置右浮动

因为我没给父元素box设置高度，所以在给box3设置浮动后，三个元素都不占空间了。就会出现高度塌陷现象。

解决高度塌陷的方法：

1:给父元素设置固定高度，但因设置固定在需要高度自适应时就不能用了

2:给出现高度塌陷的父元素添加overflow:hidden;原理:overflow:hidden 触发了BFC;bfc规定:计算BFC高度的时候,里面浮动元素也参与计算!

弊端:overflow:hidden 溢出隐藏会隐藏掉定位在当前元素以外的内容.

3:在浮动元素的下面添加一个空的元素.并且给空元素设置样式{clear:both;} //清除浮动! 闭合浮动!

弊端:会出现很多没有意义的空元素,形成代码的冗余

4:万能清除法

高度塌陷的元素:after{

                content:".";

                display:block;

                clear:both;

                height:0;

                overflow:hidden;

                visibility:hidden;

            }

在给元素添加浮动后，没有添加浮动的行内元素不会后收到上方元素的浮动影响，会自动避开浮动元素

position属性：

定义一个元素的定位方式。

属性值有：static（静态定位） absolute（绝对定位）relative（相对定位）fixed（固定定位）sticky（粘性定位）

步骤：1、给元素添加position属性，证明该元素要做位置的变化2、确定参照物（通过position的属性值来确定）3、确定坐标 left right top bottom

static 静态定位

position的默认值，默认文档流的状态，不会识别left right top bottom。

absolute 绝对定位

a:参照物：按照已有定位的父元素进行位置变化

b:假如当前没有父元素或者父元素没有定位，以整个文档为参照物

c:绝对定位脱离文档流

例子如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 0 auto;
            width: 1000px;
            height: 480px;
            background: pink;
            /* 给div添加定位 */
            position: relative;
        }
        .box_left{
            width: 40px;
            height: 60px;
            background: yellow;
            /* 给box_left添加定位，并设置确定坐标 */
            position: absolute;
            left: 0;top: 0;bottom: 0;
            margin: auto 0;
        }
        .box_right{
            width: 40px;
            height: 60px;
            background: yellow;
            /* 给box_right添加定位，并设置确定坐标 */
            position: absolute;
            right: 0;top: 0;bottom: 0;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_left">左</div>
        <div class="box_right">右</div>
    </div>
</body>
</html>

relative 相对定位

a：参照物：自身默认的位置！始终占据空间，不会破坏文档流

例子如下，给box_left设置相对定位，并且向右移动40px，box_left原有的位置还在，会一直占据空间。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background: pink;
        }
        .box_left{
            width: 40px;
            height: 60px;
            background: yellow;
            /* 给box_left添加相对定位 */
            position: relative;
            left: 40px;
        }
        .box_right{
            width: 40px;
            height: 60px;
            background:skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_left">左</div>
        <div class="box_right">右</div>
    </div>
</body>
</html>