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

【CSS3】元婴篇

article 2025/3/12 18:26:31

定位

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

实现：

定位模式：position
边偏移：设置盒子的位置
- 水平：left、right
- 垂直：top、bottom

相对定位

属性名：position: relative

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                position: relative;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <p>樱花飘落的坡道上，校服裙摆被春风掀起涟漪。
            少女抱着素描本驻足，看花瓣像融化的蜂蜜般缓缓坠落。
            忽然有片花瓣在她眼前悬停，折射出七重光晕，化作蓝紫色蝴蝶振翅欲飞。
            远处传来棒球击打声与蝉鸣交织的午后，自动贩卖机旁的少年正对着她微笑，玻璃瓶装的橘子汽水在阳光下泛着金色泡沫。</p>
        <div>
            <img src="./img/1.png" alt="">
        </div>
        <p>樱花飘落的坡道上，校服裙摆被春风掀起涟漪。
            少女抱着素描本驻足，看花瓣像融化的蜂蜜般缓缓坠落。
            忽然有片花瓣在她眼前悬停，折射出七重光晕，化作蓝紫色蝴蝶振翅欲飞。
            远处传来棒球击打声与蝉鸣交织的午后，自动贩卖机旁的少年正对着她微笑，玻璃瓶装的橘子汽水在阳光下泛着金色泡沫。</p>
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：

改变位置的参照物是原来的位置
改变位置后不会脱标，仍然占原来的位置
标签显示模式不会改变

绝对定位

属性名：position: absolute

使用场景：子级绝对定位，父级相对定位

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 600px;
            }
            .news{
                position: relative;
                margin: 100px auto;
                width: 600px;
                height: 540px;
                background-color: #f1c0c0;
            }
            .news span{
                position: absolute;
                right: 0;
                top: 0;
                display: block;
                width: 55px;
                height: 25px;
                background-color: rgba(0, 0, 0, 0.4);
                text-align: center;
                line-height: 25px;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="news">
            <img src="./img/4.png" alt="">
            <span>花卉展</span>
            <p>晴空如洗，湛蓝底色纯粹而明亮。繁茂的蔷薇在枝头铺展开绚烂画卷，粉白花瓣层层叠叠，似被阳光吻过的云朵，与翠绿枝叶交织缠绕。微风拂过，花朵轻颤，仿佛在低吟春日的浪漫絮语，每一簇绽放都浸满温柔气息，将画面晕染成动漫中独有的梦幻景致 —— 阳光倾洒，花香漫溢，连时光都在此刻变得柔软又诗意。</p>
        </div>    
    </body>
</html>

结果如下：
在这里插入图片描述

注意事项：

改变位置后会脱标，不会占用原来位置
参照物：先找最近的已经定位的先代元素，如果所有先代元素都没有定位，会参照浏览器可视区改变位置
显示模式会改变，宽高生效，具备了行内块的特点

定位居中

实现步骤：

绝对定位
水平、垂直边偏移为 50%
子级向左、上移动自身尺寸的一半
- 左、上的外边距为 -(尺寸的一半)
- transform: translate(-50%,-50%);

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            img{
                position: absolute;
                left: 50%;
                top: 50%;
                /* margin-top: -150px;
                margin-left: -100px; */
                transform: translate(-50%,-50%);
                width: 200px;
            }
            .news{
                position: relative;
                margin: 200px auto;
                width: 400px;
                height: 400px;
                background-color: #e24242;
            } 
        </style>
    </head>
    <body>
        <div class="news">
            <img src="./img/1.jpg" alt="">
        </div>    
    </body>
</html>

结果如下：
在这里插入图片描述

固定定位

属性名：position: fixed

场景：元素的位置在网页滚动时不会改变

代码示例：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            img{
                position: fixed;
                width: 1897px;
                height: 50px;
            }
            p{
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <img src="./img/2.jpg" alt="">
        <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>

结果如下：

屏幕录制 2025-03-09 165009

注意事项：

固定定位会脱标，不会占有原来的位置
参照物是浏览器窗口
显示模式具备行内块特点

堆叠层级 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: #eca8a8;
            z-index: 2;
        }
        .box2{
            background-color: #a2a9ee;
            left: 80px;
            top: 80px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

结果如下：
在这里插入图片描述

注意事项：

堆叠顺序默认按标签顺序后来居上
z-index取值是整数，默认是0，取值越大显示顺序越靠上

CSS 精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加background-position属性，改变背景图位置
- 使用测量工具测量图片左上角坐标
- 取负数坐标为background-position属性值（向左上移动图片位置）

假如要将下图的字母 N 显示出来
在这里插入图片描述

代码示例：

<!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{
            width: 45px;
            height: 50px;
            background-color: pink;
            background-image: url(./img/5.png);
            background-position: -106px -110px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：
在这里插入图片描述

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

下载字体

iconfont 图标库：https://www.iconfont.cn/

下载字体：登录→素材库→官方图标库→进入图标库→选图标，加入购物车→购物车添加至项目→下载至本地

屏幕录制 2025-03-09 220036

使用字体

操作步骤：

引入字体样式表（iconfont.css）

<link rel="stylesheet" href="./iconfont.css">

挑选相应图标并获取类名，应用于页面

<span class="iconfont icon-xxx"></span>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/font_4851524_dfjzseqnraq/iconfont.css">
    <style>
        .iconfont{
            font-size: 100px;
            color: rgb(168, 37, 168);
            margin: 20px;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-kongtiao"></span>
    <span class="iconfont icon-nuanqi"></span>
    <span class="iconfont icon-bingxiang"></span>
    <span class="iconfont icon-xiyiji"></span>
    <span class="iconfont icon-dianshiji"></span>
    <span class="iconfont icon-reshuiqi"></span>
</body>
</html>

结果如下：
在这里插入图片描述

注意事项：如果要调整字体大小，选择器的优先级要高于 iconfont 类

垂直对齐方式

属性名：vertical-align

属性值：

baseline：基线对齐（默认）
top：顶部对齐
middle：居中对齐
bottom：底部对齐

代码示例：

<!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{
            border: 2px solid black;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/1.png" alt="">
        醉后不知天在水，满船清梦压星河
    </div>
</body>
</html>

结果如下：
在这里插入图片描述

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

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

注意事项：

过渡的属性可以是具体的 CSS 属性
也可以为 all（两个状态属性值不同的所有属性都产生过渡效果）
transition 设置给元素本身

代码示例：

<!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: 300px;
            height: 300px;
            transition: all 1s;
        }
        img:hover{
            width: 450px;
            height: 450px;
        }
    </style>
</head>
<body>
    <img src="./img/1.png" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-09 230108

修饰属性

透明度

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：

0：完全透明（元素不可见）
1：不透明
0 - 1 之间小数：半透明

代码示例：

<!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{
            width: 400px;
            height: 400px;
            background-color: rgb(226, 115, 115);
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/1.png" alt="">
    </div>
</body>
</html>

结果如下：
在这里插入图片描述

光标类型

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

属性名：cursor

属性值：

default：默认值，通常是箭头
pointer：小手效果，提示用户可以点击
text：工字型，提示用户可以选择文字
move：十字光标，提示用户可以移动

代码示例：

<!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{
            width: 300px;
            height: 300px;
            background-color: #e08b8b;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>