CSS基础知识

Cascading style sheets

（1）内嵌式

• CSS 写在 style 标签中
• style 标签可以写在页面任意位置，一般放在 标签中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BRslG9Ev-1690503691915)(E:图片Javascript3b4cd496cf47a27989d9e69f59f61819421233b2.png)]

（2）外链式

• CSS 写在单独的文件中
• 通过 link 标签引入到网页中

这是一段设置了css样式的文字

（3）行内式

• CSS 写在标签 style 属性中

• 标签选择器
• 类选择器
• id 选择器
• 通配符选择器

（1）标签选择器

你好，世界

（2）类选择器

• 合法的类名：数字、字母、下划线、中划线
• 一个元素可以有多个类名，空格隔开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgD9mKXQ-1690503691916)(E:图片Javascript2ce97b84723a05a85088fad53e742851a7900d4d.png)]

（3）id 选择器

• 页面中唯一，不能重复
• 一个标签只能有一个 id
• id 选择器一般与 js 配合使用

（4）通配符选择器

• 选中页面所有标签
• 一般用于统一设置页面样式

常见字体系列

取值

• 数字 + px
• 数字 + em(推荐：1em = 当前标签的 font-size 大小)

Hello World!

Hello World!

可居中的标签

• 文本
• span标签 、a标签
• input标签 、img标签

注意: 内容居中需要给设置居中属性

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

注意: 开发中会使用 清除a标签默认的下划线

取值

• 数字 + px
• 倍数（当前标签 font-size 的倍数）

文本高度

• 上间距
• 文本高度
• 下间距

应用：3

• 让垂直居中：
• 取消上下间距：

Hello World!

Hello World!

Hello World!

层叠性：后面的样式覆盖前面的样式

复合属性

省略要求: 只能省略前面两个，如果省略了相当于设置了默认值

在线配置 font 简写形式

https://developer.mozilla.org/en-US/docs/Web/CSS/font#live_sample

• 背景颜色 background-color

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

div、p、h 需要设置元素的宽度，否则会自动撑满父元素

设置div标签居中

• 继承性

• 层叠性

• 优先级

（1）子元素有默认继承父元素样式的特点 (子承父业)

可继承的常见属性（文字属性都可以继承）

控制文字的属性都能继承，不是控制文字的属性都不能继承

注意: 可以通过调试工具判断样式是否可继承

（2）继承失效的特殊情况

如果元素有浏览器默认样式，就不继承父元素属性

• a 标签的 color 会继承时效
• h 系列标签的 font-size 会继承失效

示例 ：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e7bTnVZO-1690503691916)(E:图片Javascript3af64cb4f2b519fb5ae9bfaa027d76d0c64935da.png)]

同一个标签设置的样式

• 样式，共同作用在标签上

同一个标签设置的样式

• 样式会，最终写在最后的样式生效

特性:

• 给同一个标签设置不同的样式 -> 此时样式会重叠叠加 -> 会共同作用在标签上
• 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效

注意: 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

技巧: 编辑器多行输入

示例 ：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NK5YWMBi-1690503691917)(E:图片Javascript8ebf3b1f0c5d79aa7e8bf7f5788f1059837a335a.png)]

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式（由低到高）

• 继承
• 通配符选择器 (*)
• 标签选择器
• 类选择器
• id 选择器
• 行内样式
• !important（慎重使用）
• 继承 < 通配符选择器(*) < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

总结：选择范围越小，优先级越高

注意:

• !important写在属性值的后面，分号的前面!
• !important不能提升继承的优先级，只要是继承优先级最低!
• 实际开发中不建议使用 !important

复合选择器权重叠加

场景: 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式: (每级之间不存在进位)

• 第一级 行内样式的个数
• 第二级 id 选择器的个数
• 第三级 类选择器的个数
• 第四级 标签选择器的个数

比较规则:

1. 先比较第一级数字，如果比较出来了，之后的通通不看
2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看
3. … 以此类推
4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性 (谁在下面，谁说了算!)

需要注意：

• !important 如果不是继承，则权重最高，天下第一!
• 继承权重最低

chrome 调试: 元素右键 -> 检查元素

示例 1：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WB6Ry9UB-1690503691917)(E:图片Javascriptdf5e221f32cde166c9df71b438da2d4a210bce1f.png)]

示例 2：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5IkQmWh-1690503691917)(E:图片Javascript0851b79fc0c90527f7e3a3ead3d233f6247508c6.png)]

示例 3：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5duarqdW-1690503691918)(E:图片Javascript0d8be35c401e8dbc12214816c1ef7d2e7144a9f3.png)]

示例 4：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lULB3M6b-1690503691918)(E:图片Javascript397e781f4b77cd1bf8e81fc5be9e211ef4049072.png)]

示例 5：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPguubIc-1690503691918)(E:图片Javascript9a015495200665d638fa682028967590c12957de.png)]

复合选择器

（1）后代选择器

作用：根据 HTML 标签的嵌套关系，选择父元素满

• 后代包括: 儿子、孙子、重孙子 …
• 后代选择器中，选择器与选择器之前通过隔开

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zp3Flneq-1690503691919)(E:图片Javascript34ad9d7c79e27a34fcd530ce2c76f31ef3eedfe7.png)]

（2）子代选择器

根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFvcRJrB-1690503691919)(E:图片Javascript2b63ef60ac773686806b4c499dac60df4641f5de.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvMRabh9-1690503691920)(E:图片Javascriptfad70f3735ce0163c8595193c8e152a253f4e2e3.png)]

并集选择器

作用: 同时选择多组标签，设置相同的样式

示例：

Hello World!

Hello World!

交集选择器

作用: 选中页面中多个选择器的标签

示例：

Hello World!

Hello World!

注:

• 交集选择器中的选择器是紧挨着的，没有东西分隔
• 交集选择器中如果有标签选择器，标签选择器必须写在最前面

hover 伪类选择器

作用: 选中鼠标在元素上的，设置样式

示例：

Emmet 语法

• 简写语法，快速生成代码
• VS Code 等代码编辑器自带

css 提示

注意:

• 背景图片中 url 中可以省略引号
• 背景图片默认是在水平和垂直方向铺的
• 背景图片仅是指给盒子起到装饰效果，类似于颜色，不能撑开盒子的

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwZUbH8E-1690503691921)(E:图片Javascript2898bb2fe7e2fa81561c5971158b13f414050233.png)]

属性名: (bgr)

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gyNiPYNX-1690503691921)(E:图片Javascript11973b8cb73d778947ea5ac8cc5616ad9186c1cd.png)]

属性名: (bgp)

属性值

方位名词（最多只能表示 9 个位置）

• 水平方向：left center right
• 垂直方向：top center bottom

数字+px（坐标）

• 坐标轴 原点(0,0) 盒子的左上角
• x 轴 水平方向
• y 轴 垂直方向
• 图片左上角与坐标原点重合

注意:

• 正数: 向右向下移动; 负数: 向左向右移动
• 背景色和背景图只显示在盒子里面

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zdKThR6-1690503691922)(E:图片Javascript3beec9b190eed6f226a3674dd27bb70496886b4c.png)]

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkNIfkZe-1690503691922)(E:图片Javascript79d34affb1e75b7677bc91b984e3269226dfe5cc.png)]

img

• 不设置高宽会默认显示
• 重要突出的图使用 img

background-image

• 需要设置元素尺寸
• 装饰性图片使用背景图

• 块级
• 行内
• 行内块

• 自动换行

• 独占一行 (一行只能显示一个)

• 宽度默认为父元素的100% ；高度默认由内容撑开

• 可以设置宽度和高度

代表标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uphRuD5n-1690503691922)(E:图片Javascriptac58396dbac2c97d4a96a5b3ca001ace5aa1956c.png)]

**注意: **

• 块级元素可以嵌套任意元素
• 块级文字元素中不能放入其他块级元素，比如： p中不要嵌套div、p、h

• 一行显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽度和高度
• 行内元素的padding可以设置
• margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效

代表标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3qr5SES-1690503691923)(E:图片Javascript769b7d8a95dad224bf8452e3f8670ff50b466f8f.png)]

注意: 行内元素尽量只放行内元素与行内块元素，链接里边不能再放链接，特殊情况a可以嵌套任意元素。

综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距

• 一行显示多个
• 可以设置宽度和高度 (加宽高生效)

代表标签

注: img标签有行内块元素特点，但是Chrome调试工具中显示的结果是inline

注意：当元素浮动（float）时会转化成行内块元素特点。

• 块级元素一般作为大容器;
• 可以嵌套文本、块级元素、行内元素、行内块元素

p 标签中不要嵌套 div p h 等块级元素

• a 标签内部可以嵌套任意内容

a 标签不能嵌套 a 标签

工具：PxCook https://www.fancynode.com.cn/pxcook

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0aig4sc-1690503691923)(E:图片Javascript8f54a1f504e7f8f354afd7a17888f52575f43bc0.png)]

（1）盒子的概念

• 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
• 浏览器在渲染 (显示) 网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子

（2）盒子模型：css中规定每个盒子分别由: 内容区域 (content)、内边距区域 (padding)、边框区域 (border)、外边距区域 (margin)构成，这就是盒子模型

• 外边距区域 margin
• 边框区域 border
• 内边距区域 padding
• 内容区域 content

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nP2D5yOT-1690503691924)(E:图片Javascriptd60e7d17a37c03d12faf09f7ad2934c15219fa54.png)]

（3）盒子内容(content)的宽高

• width
• height

线条可选样式

• solid 实线
• dashed 虚线
• dotted 点线

布局顺序：

• 从外到内: 先宽高背景色，放内容，调节内容的位置，最后控制文字细节
• 从上到下

作用：设置 与 之间的距离

规律：从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面的!!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y9qYbU1v-1690503691924)(E:图片Javascriptf64091964ccbe5015c6ae1326052dccd04c12e82.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6iDSBAez-1690503691925)(E:图片Javascriptc6503fd65e418fa1f19c6e4680533fedc33d7a74.png)]

设置值的方式和 padding 类似

使用 margin 让元素居中

京东

淘宝

常用的清除样式

去掉列表前的符号

• 合并现象
• 塌陷现象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lmpP5WJz-1690503691925)(E:图片Javascript0f98a4695e8c996c5ba4f79f38d619f549c035df.png)]

合并现象

• 场景：的，上下的 margin 会合并
• 结果：最终两者距离为 margin 的最大值
• 解决方法：只给其中一个盒子设置 margin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiKOBZnJ-1690503691925)(E:图片Javascripta86af690bdd7774bfc2f6a4e76aa18ad8e5cfe60.png)]

塌陷现象

• 场景：的，子元素的 会作用在父元素上
• 结果：导致父元素一起往下移动
• 解决方法：

1. 给父元素设置 border-top 或者 padding-top(分隔父子元素的 margin-top)
2. 给父元素设置 overflow:hidden;
3. 转换为行内块元素
4. 设置浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yz4ZLMm1-1690503691926)(E:图片Javascripta1f2a59ce9dabe3cdd22d0628ac0663f8b673816.png)]

如果想要通过 margin / padding 改变行内标签的垂直位置，无法生效

即，行内标签的 margin-top 和 bottom 不生效

行内标签的 padding-top 和 bottom 不生效

行内标签使用行高 实现垂直位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6ioiix0-1690503691927)(E:图片Javascript1a9fec9ffbd104e5991ec18e967815c60d346b7f.png)]

• 作用：根据元素在 HTML 中的结构关系查找元素
• 优势：减少对 HTML 中类的依赖，有利于保持代码整洁
• 场景：常用于查找某父级选择器中的子元素

n 可以写公式

n 可取值：0 1 2 3 4…

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R46r9Q38-1690503691928)(E:图片Javascriptcb805c4b842c68db179b70a39f674681eb0558d0.png)]

• 元素：HTML 设置的标签
• 伪元素：由CSS 模拟出的标签效果，装饰性内容

注意点：

• 必须设置 content 属性才能生效
• 伪元素默认是行内元素

标准流：又称为文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流的排版规则:

• 块级元素：从上往下，垂直布局，独占一行
• 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

• 早期：图文环绕
• 现在：网页布局

行内元素或行内块元素换行书写会产生一个空格

浮动的特点

• 浮动的标签默认顶对齐，可使用 margin-top 修改距离顶部距离
• 浮动元素会脱离标准流（脱标），在标准流中不占用位置 (相当于从地面飘到了空中)
• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面，左右浮动 (默认浮动是顶对齐)
• 浮动标签具备行内块特点：
  1. 一行显示多个
  2. 可设置宽高

注意:

• 浮动的元素不能通过 margin: 0 auto 设置居中

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rg3hPwrr-1690503691928)(E:图片Javascript5a3befb643e3794b86b912bfaa05997a5794bc57.png)]

布局: 从外到内，从上到下，从左到右

CSS 书写顺序

​ 1. 浮动 / display

​ 2. 盒子模型 margin border padding 宽度高度背景色

​ 3. 文字样式

常用 css

• 内减模式：box-sizing: border-box;
• 版心居中： margin: 0 auto;

含义: 清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

清除浮动的方法

1. 直接设置父元素高度
   • 优点: 简单粗暴，方便
   • 缺点: 有些布局不能固定父元素高度。如: 新闻列表、京东推荐模块
2. 额外标签

• 在父元素内容的最后添加一个块级元素
• 给添加的块级元素设置 ;

案例:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OjNdA8Ho-1690503691929)(E:图片Javascript91938a0b2ddb652b2b91f4c657559271e6635ed4.png)]

3. 单伪元素清除法

用伪元素替代了额外标签

优点：直接给标签加类即可清除浮动

（1）基本写法

（2）补充写法

4. 双伪元素清除法

5. 给父元素设置 overflow: hidden

1. 标准流

• 块级元素独占一行 -> 垂直布局
• 行内元素/行内块元素一行显示多个 -> 水平布局

2. 浮动

• 原本垂直布局的 块级元素变成水平布局

3. 定位

• 可以让元素自由的摆放在网页的任意位置
• 一般用于 盒子之间的层叠情况
• 让盒子固定在页面某一位置

1. 设置定位方式

属性名: position

2. 设置偏移值

• 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
• 选取原则：就近原则 (离哪边近用哪个)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bXWcXOqz-1690503691929)(E:图片Javascript2a75a002962f6bf756f0daaf6624e0fe73f116c4.png)]

3. 偏移方向

• 水平距离左边 left
• 水平距离右边 right
• 垂直距离上边 top
• 垂直距离下边 bottom

css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性

介绍：静态定位是默认值，就之前识的标准流。

代码:

注意:

• 静态定位就是之前标准流，不能通过方位属性进行移动
• 之后说的定位不包括静态定位，一般特指后几种: 相对、绝对、固定

自恋型定位，相对于自己之前的位置进行移动

代码:

特点:

• 需要配合方位属性实现移动

• 相对于自己原来位置进行移动

• 在页面中占位置 -> 没有脱标 (不改变显示模式)

• 占有原来的位置

• 仍然具备标签原有的显示模式特点

Tips: 如果 4 个定位都有，以 top 和 left 为准

拼爹型定位，相对于非静态定位的父元素进行定位移动

代码:

特点:

• 需要配合方位属性实现移动

• 默认相对于浏览器可视区域进行移动

• 在页面中不占位置 -> 已经脱标

• 相对于非静态定位的父元素定位

• 不占有原来的位置

• 改变标签的显示模式: 具备行内块特点 (在一行共存，宽高生效)

• 默认以浏览器窗口定位

• 子绝父相：父级相对定位，子级绝对定位
• 绝对定位查找父级的方法：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位

注意:

• 绝对定位的盒子，不能使用 左右margin auto 居中
• 绝对定位的盒子显示模式具备行内块特点: 加宽高高度生效，如果没有宽度也没有内容，盒子的尺寸就是0

死心眼型定位，相对于浏览器进行移动

代码:

特点：

• 脱标-不占位置
• 改变位置相对于浏览器定位
• 具备行内块特点

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

2. 不同定位之间的层级关系:
   • 相对、绝对、固定默认层级相同
   • 此时 HTML 中写在下面的元素层级更高，会覆盖上面的元素 (默认情况下)
3. 设置元素层级

方式一：margin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ICI5EGUz-1690503691929)(E:图片Javascriptc2be94f91b0d564e9389bdb3ac8b3e39f8372bcf.png)]

方式二：transform

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QbRn4cPe-1690503691930)(E:图片Javascriptc2be94f91b0d564e9389bdb3ac8b3e39f8372bcf.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKmBpGRY-1690503691930)(E:图片Javascriptaef16799db78f1e8d7e8a07b6e2237845f899c5e.png)]

属性值:

示例:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ZWzVr2W-1690503691931)(E:图片Javascript45740d833c29395fa5ac6c9a7a45a018b498ee29.png)]

浏览器遇到行内和行内块标签当做文字处理，文字默认基线对齐

块标签不会当做文字处理

示例一：输入框垂直居中对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2tH52jVf-1690503691931)(E:图片Javascript2c004fa0e857ea1fcaaacc8c704b8e32875a64ee.png)]

示例二：图片垂直居中对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6cz3Rp3R-1690503691932)(E:图片Javascript7fcc052ea0fdf74774a6eac832e6daf6b71f6e02.png)]

示例三：图片水平垂直居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPJttC2i-1690503691932)(E:图片Javascripte94dbaf561744d5a87bcb32e653ae602dfe4800a.png)]

设置鼠标光标在元素上时显示的样式

属性名:

属性值:

示例：

让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名:

赋值规则: 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角!

（1）正圆

• 盒子必须是正方形
• 设置边框圆角为盒子宽高的一半

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcHlbFIe-1690503691932)(E:图片Javascript2a89cc677acd1d0e2f83a6f32f613c6c44e6bbb5.png)]

（2）胶囊按钮

• 盒子设置为长方形
• 设置边框圆角取值为高度的一半

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TX5tfbx-1690503691933)(E:图片Javascriptb419a93ebe49bfb02ad51fe1e4a3002dfe40d61c.png)]

溢出部分：指的是盒子内容部分超出盒子范围的区域

属性名:

属性值:

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6l5wUnjc-1690503691933)(E:图片Javascripta466e7e4a8fe0f5db2820f9ab9847f41c3848b45.png)]

常见的属性:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F36AXNTu-1690503691934)(E:图片Javascript36b8f8239b36ef6f0123cdafa445dd2405d24c19.png)]

示例：默认隐藏 鼠标悬停显示

属性值：

• 0-1 之间的数字；
• 0 完全透明，1 完全不透明

示例：

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mIuW85vL-1690503691934)(E:图片Javascript0c986d4bfa5d7ef1ad13b7d2550cb165bbe88ea2.png)]

项目中将多张小图，合并成一张大图，这张大图片称为精灵图

• 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
• 缺点：修改起来比较麻烦

精灵图使用步骤

1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同
2. 将精灵图设置为盒子的背景图片
3. 修改背景图位置
   • 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K18AnKoF-1690503691935)(E:图片Javascript921560d538082859966c5506613dcae9b870972f.png)]

设置背景图片的大小

语法:

取值:

background 连写

给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z8ET9u4u-1690503691935)(E:图片Javascriptc67a5a4d6be9d9cfade9f4b64187a0af224eed2c.png)]

注意:

• 外阴影，不能添加outset，添加了会导致属性报错

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名:

• 让元素样式慢慢变化
• 常配合 hover 使用

注意：

• 过渡需要: 默认状态和 hover 状态 样式不同，才能有过渡效果
• transition 属性给需要过渡的元素本身加
• transition 属性设置在不同状态中，效果不同
  • 给默认状态设置，鼠标移入移出都有过渡效果
  • 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果

peat: no-repeat;
background-size: 113px 86.5px;
width: 36px;
height: 42px;
display: inline-block;
margin-right: 50px;
}

```

[外链图片转存中…(img-K18AnKoF-1690503691935)]

设置背景图片的大小

语法:

取值:

background 连写

给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名:

[外链图片转存中…(img-z8ET9u4u-1690503691935)]

注意:

• 外阴影，不能添加outset，添加了会导致属性报错

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名:

• 让元素样式慢慢变化
• 常配合 hover 使用

注意：

• 过渡需要: 默认状态和 hover 状态 样式不同，才能有过渡效果
• transition 属性给需要过渡的元素本身加
• transition 属性设置在不同状态中，效果不同
  • 给默认状态设置，鼠标移入移出都有过渡效果
  • 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果