当前位置：首页 > news >正文

【CSS3】05-定位 + 修饰属性

news 2025/7/20 19:46:03

本文介绍定位和CSS中的修饰属性。

1. 定位

1.1 相对定位

1.2 绝对定位

1.3 定位居中

1.4 固定定位

1.5 z-index堆叠层级

2. 修饰属性

2.1 垂直对齐方式 vertical-align

2.2 过渡属性

2.3 透明度 opacity

2.4 光标类型 cursor

1. 定位

灵活改变盒子在网页中的位置

实现：

position

加上边偏移属性：top bottom left right

1.1 相对定位

position:relative

一般和其他定位相互配合使用

1.2 绝对定位

position:absolute

子级绝对定位，父级相对定位

（子级无论怎么改变都会出现在父级区域的里面）

<!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>
        img {
            width: 400px;
        }

        .news {
            /* 父级相对 */
            position: relative;
            /* 版心 */
            margin: 100px auto;
            width: 400px;
            height: 350px;
            background-color: #f8f8f8;
        }

         /*
            1.绝对定位 脱标 不占位
            2.绝对定位参照物：先找最近的已经定位的祖先元素，如果没有祖先元素，就参照浏览器可视区改位置
            3.显示模式改变：宽高生效（具备了行内块）
        */
        .news span {
            /* 子级绝对 */
            position: absolute;
            /* 边偏移属性改变位置 */
            /* 要去右上角 */
            right: 0;
            top: 0;

            /* span原来是行内，display转为块级 */
            display: block;
            width: 92px;
            height: 32px;
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            line-height: 32px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="news">
        <img src="./5.webp" alt="">
        <span>展会活动</span>
        <h4>2222世界移动大会</h4>
    </div>
</body>
</html>

1.3 定位居中

在浏览器窗口中实现定位居中

实现步骤：

1. 绝对定位

2. 水平、垂直边偏移为50%

3. 子级向左、上移动自身尺寸的一半（也可以transform:translate(-50%,-50%)）

    <style>
        img {
            /* 子级绝对 */
            position: absolute;
            /* 右移、下移浏览器页面的一半 */
            left: 50%;
            top: 50%;

            /* 左移自身图片宽度的一半 我的图片宽度是810，所以左移405px */
            margin-left: -405px;
            /* 上移同理 */
            margin-top: -540px;
        }
    </style>
</head>
<body>
    <img src="./5.webp" alt="">
</body>

第二种写法：

    <style>
        img {
            /* 子级绝对 */
            position: absolute;
            /* 右移、下移浏览器页面的一半 */
            left: 50%;
            top: 50%;

            transform: translate(-50%,-50%);
        }
    </style>

1.4 固定定位

position:fixed

在页面中无论怎么滑动，都不会动位置

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 200px;
            height: 200px;
        }

        /*
            固定定位：
            1. 脱标 不占位 
            2. 参照物：浏览器窗口 
            3. 行内块特点
        */

        div {
            position: fixed;
            /* 浏览器窗口的最顶部 */
            top: 0;
            /* 浏览器窗口的最右部 */
            right: 0;
            /* 加个宽度，看是否发生变化 */
            width: 500px;
        }
    </style>

可以看到滑动页面时他的位置也不变

1.5 z-index堆叠层级

默认效果：按照标签书写顺序，后来者居上，后写的压在前一个上面

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

如图效果：

下面代码演示：

<!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>
        div {
            position: absolute;
            /* 定位后，后来者居上 */
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
            /* z-index取值是整数，默认是0，取值越大显示顺序越靠上 */
            z-index: 1;
        }

        .box2 {
            background-color: skyblue;
            /* 加边偏移，明显看到堆叠效果 */
            left: 100px;
            top: 100px;
            /* z-index取值比box1大才能压在他上面 */
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

2. 修饰属性

2.1 垂直对齐方式 vertical-align

属性名：vertical-align

属性值：

baseline 基线对齐(默认)

top 顶部对齐

middle 居中对齐

bottom 底部对齐

什么是基线，为什么头像和昵称不能同行？

原因：将图片也当成文字处理，都在同一基线对齐

    <style>
        div {
            border: 1px solid #000;
        }
        img {
            width: 200px;
            height: 200px;
            /* 谁占的块大，给谁加 */
            /* 1. middle文字和图片对齐居中 */
            vertical-align: middle;

            /* 2. top顶对齐 */
            /* vertical-align: top; */

            /* 3.bottom底部对齐 */
            /* vertical-align: bottom; */
        }
    </style>
</head>
<body>
    <div>
        <!-- 默认：图片和文字，一个偏上一个偏下 -->
        <img src="./5.webp" alt="">
        我是谁？我在哪？
    </div>
</body>

居中：

还有一种方法：直接取消底下的空白

转换为块级即可，让浏览器认为这是块，就不当成文字和其他文字一行了

img {
    width: 200px;
    height: 200px;

    display:block;
}

2.2 过渡属性

transition

可以为一个元素在不同状态之间切换的时候添加过渡效果（如大小变化）

属性名：transition 复合属性

属性值：过渡的属性花费时间秒s

写法：

1. 可以是具体的CSS属性

2. 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

3. transition 设置给元素本身

    <style>
        /* 默认 */
        img {
            width: 200px;
            height: 150px;
            /* 属性值不同的都变化 时间1s */
            /* 加给标签本身 */
            transition: all 1s;
        }

        /* 鼠标滑动到图片时 */
        img:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="./5.webp" alt="">
</body>

2.3 透明度 opacity

设置整个元素的透明度 (包含背景和内容)

属性名：opacity

属性值：0-1

0：完全透明（元素不可见）

1：不透明

0-1小数：半透明

2.4 光标类型 cursor

鼠标悬停在元素上时显示指针显示样式

属性名：cursor

属性值：

default 默认值通常是箭头

pointer 小手效果提示用户可以点击

text 工字型提示用户可以选择文字

move 十字光标提示用户可以移动

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* cursor:pointer; 小手 */
            cursor:pointer;

            /* 工字型 可以选择文本的 */
            cursor: text;

            /* 可以移动 */
            cursor: move;
        }
    </style>
</head>
<body>
    <div></div>

本文介绍定位和CSS中的修饰属性。

查看全文

http://www.dtcms.com/a/107211.html