css定位属性详解

余晖_
150 阅读6分钟

定位

定位应用场景

应用场景:

1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面

2 页面滚动,盒子固定在页面某个位置不动.

定位的使用步骤:

1 设置定位的方式

2 设置偏移值

定位语法

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        div {
            width: 300px;
            height: 300px;
        }
​
        .red {
            background-color: red;
        }
​
        .blue {
            /* 1.1 设置定位方式 */
            position: absolute;
            /* 1.2 设置偏移值 */
            top: 150px;
            left: 150px;
            background-color: blue;
        }
    </style>
</head>
​
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
​
</html>

静态定位

position: static;特点: 1 静态定位就是普通的标准流 2 静态定位设置偏移值无效.

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        div {
            width: 300px;
            height: 300px;
        }
​
        .red {
            background-color: red;
        }
​
        .blue {
            /* 定位方式 */
            /* 静态定位 */
            position: static;
            /* 偏移值 */
            left: 10px;
            top: 10px;
            background-color: blue;
        }
​
        /* 
        特点
        静态定位就是之前的标准流,不能通过方位属性来移动位置
        */
    </style>
</head>
​
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
​
</html>

相对定位

position: relative; 特点: 1 需要配合方位属性来移动位置 2 想对于自身原来的位置进行移动 3 在页面中占位置-没有脱标

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        div {
            width: 300px;
            height: 300px;
        }
​
        .red {
            background-color: red;
        }
​
        .green {
            /* 相对定位 */
            position: relative;
            left: 20px;
            top: 40px;
            background-color: green;
        }
​
        .blue {
            background-color: blue;
        }
​
    </style>
</head>
​
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>
​
</html>

绝对定位

position: absolute; 特点 1 需要配合方位属性实现移动 2 默认相对于浏览器的可视区域进行移动位置 3 不占位置 脱标

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        .father {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: blue;
        }
​
        .son {
            /* 相对定位 */
            /* position: relative; */
            width: 300px;
            height: 300px;
            background-color: red;
        }
​
        .sun {
            /* 绝对定位 */
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            background-color: green;
        }
​
    </style>
</head>
​
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>
​
</html>

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        div {
            width: 300px;
            height: 300px;
        }
​
        .red {
            background-color: red;
        }
​
        .green {
            /* 绝对定位 */
            position: absolute;
            left: 150px;
            top: 150px;
            background-color: green;
        }
​
        .blue {
            background-color: blue;
        }
​
    </style>
</head>
​
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>
​
</html>

子绝父相

子绝父相:

子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.

子绝父绝:

实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.

绝对定位的盒子水平垂直居中

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        .father {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: red;
            margin: 0 auto;
        }
​
        .son {
            /* 绝对定位 */
            position: absolute;
            /* 1 先让子盒子往右移动父盒子的一半*/
            left: 50%;
            /* 先让子盒子往下移动父盒子的一半 */
            top: 50%;
            /* 2 再让子盒子往左移动自身宽度的一半  margin负值*/
            /* 再让子盒子往上移动自身高度的一半 margin负值*/
            /* margin-left: -100px;
            margin-top: -100px; */
​
            /* 优化做法 transform 后期移动端会详细讲解 有兼容性问题 pc端建议大家使用margin负值*/
            /* transform: translateX(-50%);
            transform: translateY(-50%); */
            /* 注意 x和y之间一定要用逗号隔开 */
            /* transform: translate(x,y); */
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 绝对定位的盒子不能使用 margin: 0 auto; */
​
        }
    </style>
</head>
​
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
​
</html>

固定定位

position: fixed; 特点 1 需要配合方位属性来移动位置 2 相对于浏览器的可视区域进行移动位置 3 不占位置-脱标

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 固定定位 */
            position: fixed;
            /* left: 10px;
            top: 20px; */
            right: 10px;
            top: 50px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
​
<body>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <div class="box"></div>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
​
</body>
​
</html>

定位特殊性

行内元素加了绝对/固定定位可以设置宽高

块级元素加了绝对/固定定位,如果不给宽高,宽高由内容撑开

嵌套块级元素加了绝对/固定定位,不会有塌陷问题.

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        span {
            /* 绝对定位 */
            /* position: absolute; */
            /* 固定定位 */
            position: fixed;
            left: 10px;
            top: 20px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
​
        /* div {
            position: absolute;
            right: 20px;
            top: 30px;
            background-color: blue;
        } */
​
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
​
        .son {
            position: fixed;
            left: 0;
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
​
    </style>
</head>
​
<body>
    <!-- <span>行内元素</span>
    <div>块级元素</div> -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>
​
</html>

元素层级

不同布局方式元素的层级关系：

标准流 <浮动 <定位

定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)

(默认情况下 定位的盒子，后来者居上)

z-index属性可以修改定位元素之间的层级关系

z-index: 数字(默认值是auto );

z-index属性的属性值千万不要加单位

数字越大,层级越高.只有定位的盒子才有 z-index属性

小结

1642825929393.png

子绝父相

子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.

css提高

垂直对齐方式

场景:解决行内/行内块元素垂直对齐问题

vertical-align属性只对行内或行内块元素有效.

/* 默认值 基线对齐 */

        *vertical-align*: baseline;
​
        /* 底部对齐 */
​
        *vertical-align*: bottom;
​
        /*中线对齐 */
​
        *vertical-align*: middle;
​
        /* 顶部对齐 */
​
        *vertical-align*: top;

光标类型

1642839352582.png

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(1) {
            cursor: default;
        }
​
        ul li:nth-child(2) {
            cursor: pointer;
        }
​
        ul li:nth-child(3) {
            cursor: zoom-in;
        }
​
        ul li:nth-child(4) {
            cursor: zoom-out;
        }
​
        ul li:nth-child(5) {
            cursor: move;
        }
​
        ul li:nth-child(6) {
            cursor: text;
        }
​
        ul li:nth-child(7) {
            cursor: not-allowed;
        }
    </style>
</head>
​
<body>
    <ul>
        <li>鼠标形状默认值 箭头</li>
        <li>鼠标形状 小手</li>
        <li>鼠标形状 放大 后期搭配js一起使用</li>
        <li>鼠标形状 缩小 后期搭配js一起使用</li>
        <li>鼠标形状 移动</li>
        <li>鼠标形状 文本</li>
        <li>鼠标形状 禁止</li>
    </ul>
</body>
​
</html>

边框圆角

border-radius

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 50px auto;
            /*  */
            /* border-radius: 10px; */
            /* 从左上角开始赋值 如果没有赋值看对角 */
            border-radius: 10px 40px;
            border-radius: 10px 40px 60px;
            /* 左上角 右上角  右下角  左下角  顺时针 */
            border-radius: 10px 40px 60px 90px;
            border-radius: 0 50%;
        }
    </style>
</head>
​
<body>
    <div class="box"></div>
</body>
​
</html>

overflow溢出部分显示效果

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 溢出部分显示效果 */
            /* 默认值 溢出部分可见 */
            overflow: visible;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 无论是否溢出都显示滚动条 */
            overflow: scroll;
            /* 根据是否溢出,自动显示滚动条 */
            overflow: auto;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
​
<body>
    <div class="box">
        溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果溢出部分显示效果
    </div>
</body>

定位的盒子慎用 overflow: hidden;

文字溢出显示

1642841665305.png

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 20px;
            background-color: pink;
            /* 1 让换行的文字强制在一行显示 */
            white-space: nowrap;
            /* 2 文字溢出的部分隐藏 */
            overflow: hidden;
            /* 3 文字溢出部分用省略号显示 */
            text-overflow: ellipsis;
        }
​
        .box2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            width: 100px;
            height: 60px;
            background-color: pink;
        }
    </style>
</head>
​
<body>
    <div class="box1">单行文本溢出显示省略号</div><br>
    <div class="box2">多行文本溢出显示省略号，多行文本溢出显示省略号，多行文本溢出显示省略号，多行文本溢出显示省略号，多行文本溢出显示省略号</div>
</body>
​
</html>

元素本身隐藏

 /* 隐藏元素本身 占位置 */
visibility: hidden; 
 /* 隐藏元素本身 不占位置*/
 display: none;

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
​
        .box1 {
            /* 隐藏元素本身 占位置 */
            /* visibility: hidden; */
            /* 隐藏元素本身 不占位置*/
            display: none;
            background-color: red;
        }
​
        .box2 {
            background-color: purple;
        }
​
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
​
        /* 1 让son盒子隐藏 */
        .son {
            display: none;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
​
        /* 2 鼠标经过father盒子后让son显示出来 */
        .father:hover .son {
            display: block;
        }
    </style>
</head>
​
<body>
    <div class="box1">乔治</div>
    <div class="box2">小猪佩奇</div>
    <hr>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
​
</html>

元素整体透明度

opacity:0.5; 属性值：0~1之间的数字 1：表示完全不透明 0：表示完全透明 opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

细线边框

border-collapse: collapse;

css画三角形

1642846135118.png

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* width: 300px;
            height: 300px; */
            width: 0;
            height: 0;
            /* background-color: pink; */
            /* transparent 透明的 */
            border-top: 50px solid transparent;
            border-bottom: 50px solid green;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>
​
<body>
    <div class="box"></div>
</body>
​
</html>
avatar
文章
阅读
粉丝