CSS学习_05(零基础)

最新推荐文章于 2024-11-01 15:19:31 发布

我会一直陪着你

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量156

点赞数 5

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qiwulmj/article/details/134447967

版权

定位

1.定位的作用

如果我们想让两个标签叠在一起显示使用定位!!!标准流(无法实现快标签左右的问题) 浮动(无法实现标签的层叠问题)

2.使用定位的步骤

1.设置定位方式

属性名position:static(静态定位) relative(相对定位) absolute(绝对定位) fixed(固定定位 )

2.设置偏移值

偏移值设置分别有两个方向,水平和垂直方向各选一个即可

水平方向 left 数字+px 距离左边的距离

水平方向 right 数字+px 距离右边的距离

垂直方向 top 数字+px 距离上边的距离

垂直方向 bottom 数字+px 距离下边的距离

3.对四种定位具体介绍

1.静态定位:

没写postion就是静态定位(原本的就是静态定位)

2.相对定位

特点:1.占有原来的位置 2.仍然具有原有标签的显示特点 3.改变的位置是参照自己原来的位置

注意:如果right和left,top和bottom都有.和顺序没关系.left和top生效,right和bottom不生效

3.绝对定位

介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动

1.先找已经定位的父级,如果有这样的父级以这个父级为参照物进行定位

2.有父级,但父级没有定位,以浏览器窗口为参照物进行定位

工作中一般的定位方式为:父为相对定位子为绝对定位

代码:postion:absolute;

特点: 1.脱标不占位

2.改变标签的显示特点:变为: 行内块

3.就近找定位的父级(广义)如果找不到,就是body也就是整个窗口

案例:绝对定位的居中

首先我们观察到使用绝对定位后盒子不能使用margin auto居中

使用下面代码使盒子居中

left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;

总结我们标准流使用:margin auto实现居中,绝对定位使用上面的方法(还可以使用 transform: translate(-50%, -50%);位移自己宽度高度的一半,可以自己试试)

案例:定位二维码

实例代码

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {

            list-style: none;

        }

        a {
            float: left;
            display: block;
            text-align: center;
            width: 120px;
            height: 50px;
            border: 1px solid black;
            line-height: 50px;
            background-color: pink;
            text-decoration: none;
            color: black;
        }

        ul li .app {
            position: relative;
        }

        ul li .app .code {
            position: absolute;
            left: 50%;
            top: 51px;
            transform: translate(-50%);
        }

        .wapper {
            width: 600px;
            margin: 0 auto;
        }

        .nav {
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="nav wapper">
        <ul>
            <li><a href="#">平台二维码</a></li>
            <li><a href="#">平台二维码</a></li>
            <li><a href="#">平台二维码</a></li>
            <li><a href="#" class="app">平台二维码<img src="./img/tupian2.png" alt="" class="code"></a></li>
            <li><a href="#">平台二维码</a></li>
        </ul>
    </div>
</body>

</html>