CSS 定位 CSS精灵 字体图标 修饰属性

于 2024-05-23 16:05:38 发布
阅读量992 收藏 15
点赞数 11
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67140973/article/details/138962587
版权

目录

正文开始

1. 定位

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

实现：

  • 定位模式：position
  • 边偏移：设置盒子的位置
    • left（左）
    • right（右）
    • top（上）
    • bottom（下）

关于属性名position的属性值：

属性值说明是否脱标显示模式参照物
relative相对定位否保持原有显示模式自己原来位置
absolute绝对定位是行内块特点离自己最近的已定位的祖先元素，若没有，则为浏览器可视区
fixed固定定位是行内块特点浏览器窗口

1.1 相对定位

作用：以自身位置为原点进行位置调整。

相对位置特点：

  • 是以自身的位置为参照来改变位置
  • 不脱标，原本的位置仍然会占用
  • 不改变原本标签的显示模式

相对定位模式设置：position:relative

例如：

<!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>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2 {
            position: relative;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .div3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

页面效果：
在这里插入图片描述

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>
        .div1 {
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .span1 {
            position: absolute;
            top: 0px;
            right: 0px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span class="span1">精品展示</span>
    </div>
</body>
</html>

页面效果：
在这里插入图片描述

1.2.1 定位居中

实现步骤：

  • 绝对定位
  • 水平、垂直边偏移为50%
  • 子集向左、上移动自身尺寸的一半：
    • 可以使用margin属性实现
    • 也可以使用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>
        .div1 {
            position: relative;
            margin: 50px 20px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .div2 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            /*使用margin调整*/
            margin-left: -50px;
            margin-top: -50px;
            background-color: green;
        }
        .div3 {
            position: relative;
            margin: 50px 20px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .div4 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            /*使用transform调整*/
            transform: translate(-50%,-50%);
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div class="div3">
        <div class="div4"></div>
    </div>
</body>
</html>

页面效果：
在这里插入图片描述

1.3 固定定位

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

固定定位特点：

  • 脱标，不再占用原本位置
  • 是以浏览器窗口为参照来改变位置
  • 固定定位的标签的显示模式会变为行内块模式

固定定位模式设置：position:fixed

例如：
在这里插入图片描述

1.4 堆叠层级

当使用定位对多个盒子修饰时，盒子可能会相互覆盖，所以盒子的显示顺序是需要调整的。顺序的默认效果是：按照标签书写顺序，后来者居上。下面我们来学习如何调整：

属性名：z-index

属性值：属性值为整数，默认为0，取值越大，显示顺序越靠上

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

例如：

<!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;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
            z-index: 1;
        }
        .div2 {
            width: 100px;
            height: 100px;
            top: 70px;
            left: 70px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

页面效果：
在这里插入图片描述

2. CSS 精灵

CSS 精灵，又叫 CSS Sprites，是一种网页应用处理方式。把网页中一些背景图片整合到一张图片文件中，再 background-position 精确的定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

  1. 创建盒子，且保持盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加 background-position 属性，改变背景图位置，调整图片位置到正好能使盒子框住想使用的小图

例如，我们想要显示一张精灵图中的某个小图，小图宽为112px，高为110px；并且小图左上角在精灵图中的坐标为(256px,276px)，则可书写为：

<!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: 112px;
            height: 110px;
            background-color: pink;
            background-image: url("#");
            background-position: -256px -276px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3. 字体图标

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

比如某网站上的字体图标：
在这里插入图片描述

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

优点：

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

3.1 字体图标 - 下载字体

可以在iconfont 图标库下载字体图标

下载步骤：登录 -> 素材库 -> 官方图标库 -> 进入图标库 -> 选择图标并加入购物车 -> 进入购物车并添加至项目 -> 确定 -> 下载至本地

下载并解压后的文件：
在这里插入图片描述

3.2 字体图标 - 使用字体

下载完成后，就可以使用字体图标了

使用步骤：

  1. 引入字体样式表（iconfont.css）
  2. 定义标签的类名为使用字体图标
    • iconfont：字体图标基本样式（字体名，字体大小等）
    • icon-xxx：图标对应的类名

例如：

  1. 引入字体样式表：
 <link rel="stylesheet" href="./iconfont/iconfont.css">

  1. 在说明网页中找到字体图标对应的类名：
    在这里插入图片描述

  2. 定义标签的类名为iconfont icon-xxx

<div class="iconfont icon-notification"></div>
  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>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    </style>
</head>
<body>
    <div class="iconfont icon-notification"></div>
</body>
</html>
  1. 页面效果：
    在这里插入图片描述

字体图标设置好后就可以进行设置，设置方式同字体相同。
需要注意的是，设置字体图标时，应选择优先级大于或等于类选择器的选择器，因为在我们引用的 CSS 文件中使用了类选择器设置字体图标，所以如果我们想设置，优先级应大于或等于类选择器

4. 修饰属性

4.1 垂直对齐方式 - vertical-align

属性名：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: 1px solid black;
        }
        img:nth-child(1) {
        	/* 居中对齐 */
            vertical-align: middle;
        }
        img:nth-child(1) {
        	/* 顶部对齐 */
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div>
        <img src="C:\Users\w3161\Pictures\Screenshots\屏幕截图 2024-05-10 152656.png" alt="" width="150px">
        hhhhhhhhhhhhhhhhhhhhhhhh
    </div>
    <br><br><br>
    <div>
        <img src="C:\Users\w3161\Pictures\Screenshots\屏幕截图 2024-05-10 152656.png" alt="" width="150px">
        hhhhhhhhhhhhhhhhhhhhhhhh
    </div>
</body>
</html>

页面效果：
在这里插入图片描述
图片若不做处理会被当作文字处理，也就是会基线对齐，那么图片与盒子之间就会有小空隙，可以通过改变垂直对齐方向来去除掉，也可以通过设置display: block;来去除。

4.2 过渡 - transition

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

属性名：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: 200px;
            transition: all 1s;
        }
        img:hover {
            width: 500px;
        }

    </style>
</head>
<body>
    <img src="C:\Users\w3161\Pictures\Screenshots\屏幕截图 2024-05-10 152656.png" alt="">
</body>
</html>

上述代码实现的功能：当鼠标悬停在图片上时，图片会在1s的时间内逐渐变大到指定大小。

4.3 透明度 - opacity

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

属性名：opacity

属性值：0 - 1

  • 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: 500px;
            height: 500px;
            background-color: pink;
            opacity: 0.6;
        }
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <div>
        <img src="C:\Users\w3161\Pictures\Screenshots\屏幕截图 2024-05-10 152656.png" alt="">
    </div>
</body>
</html>

页面效果：
在这里插入图片描述

4.4 光标类型 - cursor

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

属性名：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>title</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;

            /* 工字型 */
            cursor: text;

			/* 小手型 */
			cursor:pointer;

			/* 十字型 */
			cursor: move;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
wwangxu
关注
  • 11
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你要的【CSS常用高级技巧】都在这里
榕城候佳人的博客
03-29 455
1.为什么需要精灵图 一个网页中往往有许多图片，服务器频繁接收发送图片就会降低页面加载速度，为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术。
CSS 精灵
m0_73782968的博客
02-25 198
Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
Web前端最全CSS精灵图的原理与使用方法介绍【前端开发】，2024年最新那些进了大厂的程序员面试前都做了哪些准备工作
最新发布
2401_84434442的博客
05-16 430
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】I.精灵图介绍II.精灵图的实现方式：拼出你的名字III.软件辅助定位高质量博主，点个关注不迷路🌸🌸🌸**！
CSS相关内容（六）
weixin_42823014的博客
03-22 251
（六）CSS 高级 1.1 精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。 1.2 精灵图(sprites)的使用 精灵图主要针对于背景图片使用，把多个小背景图片整合到一张大图片中去。 移动背景图片位置可以用background—positi
CSS的高级特性
m0_72769858的博客
02-09 1734
本章内容主要介绍了复合选择器的用法以及css两个重要的性质——层叠性和继承性，还有出现相同的属性时优先级的判断。
CSS精灵图(sprite)
wshwsh_的博客
07-26 3393
精灵图，也称雪碧图(sprite)，基本原理就是将页面中使用到的各种图片进行分类，整齐划一的摆在一张背景透明的图片上面，通过 CSS 的背景技术实现图片的引入，从而减少服务器发送和接收请求的次数，提高页面的加载速度。
每日知识总结
m0_73801853的博客
09-28 167
CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。- hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。##### 2.1.1 实现步骤。
CSS精灵图
LikY03321的博客
12-26 243
那么这是怎么实现将这么一张复杂的图片分别展示出来的呢，这里就得运用到了background-position。我们通过它来改变背景图片的位置，从而显示出我们想要显示出来的部分。所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。
CSS高级技巧
qiutiandepaomo的博客
06-23 636
一、元素的显示与隐藏 1、diaplay属性来设置或检索对象是否及如何显示。 display:none 隐藏对象； display:block 除了转换为块级元素之外，同时还有显示元素的意思。 特点是隐藏之后，将不再保留位置。 2、visibility 可见性 visibility：visible 对象可视； visibility：hidden 对象隐藏。 特点：隐藏之后，继续保留原有位置。 3、overflow 溢出 overflow：visible 不剪切内容也不添加滚动条 ove
【CSS高级技巧】
小王的博客
11-01 291
一、精灵图 二、字体图标 三、CSS三角 四、CSS用户界面样式 五、vertical-align属性应用 六、溢出的文字省略号显示 七、常见的布局技巧 八、CSS初始化
css高级
weixin_44687467的博客
08-17 280
css 表格相对于页面居中：使用margin:auto 设置 表格边线合并：border-collapse:collapse 文档流：按照标签的顺序来显示文档的一种格式 定位：用于打破文档流显示顺序的一种方式。定位可以让标签漂浮起来，可以覆盖于其他标签之上，可以放在任意位置 ，不受文档限制。 定位的样式属性：我们可以使用css的position属性来设置元素的定位类型postion...
精灵图、定位
x111223的博客
10-08 861
css 精灵 英文叫法”css sprites“ 也成”精灵图、雪碧图“，通常被解释为”css图像拼合“或”css贴图定位“。其实就是把一些”背景图片“ 整合到一张图片文件中，在利用“背景定位”显示合适的图片。一般精灵图适合小背景，不适合大背景。
从0到1学前端：day08-CSS高级
黑马程序员官方博客
04-17 76
目标：掌握定位的作用及特点；掌握 CSS 高级技巧。
CSS3 背景+CSS3 精灵图
不要让努力成为一种奢望，它应该如同呼吸一样自热而然。
04-05 1271
HTML5和CSS3-11-1(2)
CSS高级技巧学习
weixin_61920612的博客
02-13 715
CSS高级技巧学习
CSS入门六、常用技巧
李宥的博客
01-11 1116
- CSS 是`层叠样式表` ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言。 - CSS 主要用于设置 HTML 页面中的`文本内容`（字体、大小、对齐方式等）、`图片的外形`（宽高、边框样式、边距等）以及`版面的布局和外观显示样式`。 - CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：`CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。`
【CSS】CSS 精灵技术 Sprite ( 精灵技术需求 | CSS 精灵技术简介 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-17 841
一、精灵技术需求 二、CSS 精灵技术 三、CSS 精灵技术代码示例
CSS精灵
weixin_52629158的博客
04-03 191
css精灵，又叫css背景精灵。“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是，该方法是。css精灵有什么优点，就是。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。淘宝网的精灵图：用fireworks精确控制精灵:。(1) 先在原图（淘宝网的精灵图），用切片，框选出 你要显示图的 大小（你用(2) 我们使用fireworks中的切片绘制矩形。。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值