一、初识 CSS1, CSS 定义层叠样式表(Cascading Style Sheets，缩写为 CSS)，是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）

CSS 能够对网页中元素位置的排版进行 像素级 精确控制，实现美化页面的效果. 能够做到页面的样式和结构分离

image-202502251641237182, 基本语法规范选择器 +{一条/N条声明)

选择器决定针对谁修改(找谁)声明决定修改啥 (干啥)声明的属性是键值对，使用：区分键值对，使用：区分键和值书写规则： 选择器{属性名：属性值}

代码语言：javascript代码运行次数：0运行复制

这是一个p标签

注意：

css 要写到 style 标签中(后面还会介绍其他写法)style 标签可以放到页面任意位，一般放到 head 标签内CSS 使用 /* */ 作为注释.(使用 ctrl +/快速切换)3, CSS 引入① 内部样式表：学习使用

CSS 代码在 style 标签里面，嵌入到 html 内部优点：这样做能够让样式和页面结构分离.缺点：分离的还不够彻底. 尤其是 css 内容多的时候. 前面写的代码主要都是使用了这种方式. 实际开发中不常用.

PS: 搜狗搜索中仍然保留着这种写法.image-20250225164947394② 行内样式表：配合 JS 使用

通过 style 属性, 来指定某个标签的样式.只适合于写简单样式. 只针对某个标签生效.缺点: 不能写太复杂的样式，这种写法优先级较高, 会覆盖其他的样式代码语言：javascript代码运行次数：0运行复制

效果如下：

image-20250225165421411此时可以看到 red 被覆盖了③ 外部样式表：开发使用

CSS 代码写在单独的 CSS 文件里面 (.css)

在 HTML 使用 link 标签引入 CSS

代码语言：javascript代码运行次数：0运行复制优点: 样式和结构彻底分离了.

缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效

【案例】：

代码语言：javascript代码运行次数：0运行复制

p{

color: red;

}

这是一个p标签

注意：不要忘记 link 标签调用 CSS, 否则不生效

关于缓存：

这是计算机中一种常见的提升性能的技术手段.网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了)。从而提高访问效率可以通过 ctrl + F5 强制刷新页面，强制浏览器重新获取 css 文件4, 代码风格 样式风格

① 紧凑风格

代码语言：javascript代码运行次数：0运行复制p { color: red; font-size: 30px;}② 展开风格

代码语言：javascript代码运行次数：0运行复制p {

color: red;

font-size: 30px;

} 样式大小写

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

空格规范

冒号后面带空格选择器和 { 之间也有一个空格二、选择器1. 基本概念选择器功能

选中页面中指定的标签元素，来设置样式

要先选中元素, 才能设置元素的属性.就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.选择器种类

以下内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 咱们后面再说

基础选择器：单个选择器构成的

标签选择器类选择器id 选择器通配符选择器复合选择器：把多种基础选择器综合运用起来

后代选择器子选择器并集选择器伪类选择器参考文档：w3school

2. 基础选择器2.1 标签选择器**标签选择器：**使用 标签名 作为选择器 -> 选中 同名标签 设置 相同的样式

特点: 能快速为同一类型的标签都选择出来，但是不能差异化选择。相当于 选中所有的这个标签都生效css

例如：p，h1，div，a，img…

代码语言：javascript代码运行次数：0运行复制

猫

咬人

2.2 类选择器特点: 差异化表示不同的标签，可以让多个标签的都使用同一个标签.

步骤：

定义类选择器 -> .类名

使用类选择器 -> 标签添加 class= “类名”

代码语言：javascript代码运行次数：0运行复制

111

222

注意：

类名用 . 开头的一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)类名自定义，不要用 纯数字或者中文，尽量用英文命名类名可以由数字、字母、下划线、中划线组成，但是不能用数字、中划线开头一个标签可以同时使用多个类名 ，用空号隔开就行，这样做可以把相同的属性提取出来，达到简化代码的效果.**开发习惯：**类名见名知意，多个单词可以用 - 连接

2.3 id 选择器和类选择器类似.

CSS 中使用 # 开头表示 id 选择器id 选择器的值和 html 中某个元素的 id 值相同html 的元素 id 不必带 #id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)步骤：

定义 id 选择器 -> #id 名使用 id 选择器 -> 标签添加 id= “id名”代码语言：javascript代码运行次数：0运行复制

111

以后加js会容易出错注意：

所有标签都有id属性id 属性值在一个页面中是唯一的，不可重复一个标签只能有一个id属性一个id选择器只能选中一个标签类比：姓名是类选择器, 可以重复。 身份证号码是 id 选择器，是唯一的.

**id 选择器 VS 类选择器：**前者优先级更高

2.4 通配符选择器通配符选择器： ***** ， 不需要被页面结构调用。

浏览器自动查找页面所有标签，设置相同样式代码语言：javascript代码运行次数：0运行复制

h1

pp

2.5 基础选择器小结名称

作用

特点

标签选择器

能选出所有相同标签

不能差异化选择

类选择器

能选出一个或多个标签

根据需求选择，最灵活常用

id 选择器

能选出一个标签

同一个 id 在一个 HTML 中只能出现一次

通配符选择器

能选择所有标签

特殊情况下使用

3. 复合选择器定义： 由 两个 或 多个基础选择器，通过不同的方法组合而成

作用：更准确、更高效的选择目标元素（标签）

代码语言：javascript代码运行次数：0运行复制 span 标签

元素 1 和 元素 2 要使用空格分割元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 13.1 后代选择器 后代选择器：又叫包含选择器，选中某元素的某后代元素

选择器写法： 父选择器 子选择器 {CSS 属性}，父子选择器之间用空格隔开

如下：

代码语言：javascript代码运行次数：0运行复制元素1 元素2 {样式声明}【案例1】

代码语言：javascript代码运行次数：0运行复制

这是p标签

效果如下：

上面我们可以看到只要是属于 div 后代的 p标签，都变红了【案例 2】：可以是任意基础选择器的组合. (包括类选择器, id 选择器)

代码语言：javascript代码运行次数：0运行复制

1. ddd
2. eee
3. fff
4. fff
5. fff

3.2 子代选择器 如果我们不想选中所有后代，只选子代

子代选择器：选中某元素的 子代 元素（最近的子级），只选择亲儿子，不选孙子元素

选择器写法： 父选择器 > 子选择器{CSS 属性}，父子选择器之间用 > 隔开

代码语言：javascript代码运行次数：0运行复制

3.3 并集选择器 并集选择器：选中多组标签设置相同样式

✈️ 选择器写法：元素1，元素2，… ，元素N {CSS 属性}

选择器之间用 , 隔开表示同时选中元素 1 和 元素 2 …任何基础选择器都可以使用并集选择器.并集选择器建议竖着写，每个选择器占一行. (最后一个选择器不能加逗号)代码语言：javascript代码运行次数：0运行复制

pp

span

h1

3.4 交集选择器 交集选择器：选中同时满足 多个条件 的元素

🇭🇹 选择器写法：选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号。

代码语言：javascript代码运行次数：0运行复制p.box{color: red;}注意：如果交集选择器中有标签选择器，标签选中器必须写在最前面

代码语言：javascript代码运行次数：0运行复制

这是p标签 ：box

pppp

1

3.5 伪类选择器 🔗 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式

代码语言：javascript代码运行次数：0运行复制

这是超链接

① 链接伪类选择器

选择器

作用

:link

访问前

:visited

访问后

:hover

鼠标悬停

:active

点击时（激活）

代码语言：javascript代码运行次数：0运行复制

这是超链接注意：

注意事项 按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效。记忆规则 “绿化”

浏览器的 a 标签都有默认样式，一般实际开发都需要单独制定样式.

实际开发主要给链接做一个样式，然后给 hover 做一个样式即可. link, visited, active 用的不多.

如下：

代码语言：javascript代码运行次数：0运行复制/* 工作中，一个 a 标签选择器设置超链接的样式， hover 状态特殊设置 */

a {color: black;}

a:hover {color: red;} 备注：如何让一个已经被访问过的链接恢复成未访问的状态?

清空浏览器历史记录即可：ctrl + shift + delete② :foces 伪类选择器

选取获取焦点的 input 表单元素.

代码语言：javascript代码运行次数：0运行复制

此时被选中的表单的字体就会变成红色

③ 结构伪类选择器

根据元素的 结构关系 查找元素

选择器

说明

E:first-child

查找第一个 E 元素

E:last-child

查找最后一个 E 元素

E:nth-child(N)

查找第 N 个 E 元素（第一个元素 N 值为1）

【案例】

代码语言：javascript代码运行次数：0运行复制

P: 111

P: 222

P: 333

P: 444

效果如下：

image-20250226213016700补充：:nth-child(公式)

根据元素的结构关系查找多个元素

功能

公式

偶数标签

2n

奇数标签

2n+1; 2n-1

找到 5 倍速的标签

5n

找到第 5 个以后的标签

n+5

找到第 5 个以前的标签

-n+5

④ 伪元素选择器

创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器

说明

E::before

在 E 元素里面 最前面 添加一个伪元素

E::after

在 E 元素里面 最后面 添加一个伪元素

注意：

必须设置 content: " " 属性，用来设置 伪元素 内容，如果没有内容，则引号留空伪元素默认是 行内 显示模式，不受 宽高 影响权重 和 标签选择器 相同代码语言：javascript代码运行次数：0运行复制

结果如下：

image-202502262142122763.6 复合选择器小结选择器

作用

注意事项

后代选择器

选择后代元素

可以是孙子元素

子选择器

选择子元素

只能选亲儿子，不能选孙子

并集选择器

选择相同样式的元素

更好的做到代码复用

链接伪类选择器

选择不同样式的元素

重点掌握 a:hover 的写法

:focus 伪类选择器

选择被选中元素

重点掌握 input:focus

三、常用元素属性描述

属性

属性值 / 关键字

字体大小

font-size

30px/10em/300%/3cm

字体粗细

font-weight

数字 / normal / bold

字体倾斜

font-style

normal / italic

字体族

font-family

黑体、微软雅黑

字体复合属性

font

备注：上面 1 em = 当前标签的字号大小

1. 字体属性1.1 设置字体代码语言：javascript代码运行次数：0运行复制body {

font-family: '微软雅黑';

font-family: 'Microsoft YaHei';

}注意：

字体名称可以用中文，但是不建议

如果电脑没有 安装微软雅黑，就按照黑体使用

如果电脑有没有安装黑体，就按照任意一种非衬线字体系列显示

可以设置多个字体名称，之间使用空格隔开，在实际加载中只会选择一种加载，选择的依据是书写顺序进行（每个字体名用逗号隔开，从左往右查找）

如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。

代码语言：javascript代码运行次数：0运行复制font-family: 微软雅黑，黑体， sans-serif;font-family 属性最后设置一个字体族名，网页开发建议使用 无衬线字体建议使用常见字体, 否则兼容性不好【案例】

代码语言：javascript代码运行次数：0运行复制

1.2 设置大小代码语言：javascript代码运行次数：0运行复制p{font-size: 20px}不同的浏览器默认字号不一样，最好给一个明确值. (chrome 默认是 16px)可以给 body 标签使用 font-size要注意单位 px 不要忘记.标题标签需要单独指定大小 注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

【案例】

代码语言：javascript代码运行次数：0运行复制

1.3 设置粗细代码语言：javascript代码运行次数：0运行复制p{

font-weight: bold;

font-weight: 700;

}可以使用数字表示粗细700 == bold，400 是不变粗== norma取值范围是 100->900【案例】

代码语言：javascript代码运行次数：0运行复制

1.4 文字样式代码语言：javascript代码运行次数：0运行复制/*设置倾斜 */

font-style: italic;

/* 取消倾斜 */

font-style: normal;很少把某个文字变倾斜但是经常要把 em /i 改成不倾斜【案例】

代码语言：javascript代码运行次数：0运行复制

1.5 font 复合属性font 是否倾斜，是否加粗，字号/行高 字体（必须按顺序属性）

代码语言：javascript代码运行次数：0运行复制

这是p标签

注意：字号和字体值必须书写，否则 font 属性不生效

2. 文本属性文本缩进

text-indent

数字 + px / em

文本对齐

text-align

left（左对齐）、 center（居中）、right（右对齐）

修饰线

text-decoration

none(无)、underline(下滑线)、line-through(删除线)、overline(上划线)

颜色

color

颜色英文词、rgb、rgba、#RRGGBB（16进制）

行高

line-height

30px/ 2（纯数字表示是当前大小的倍数）

2.1 文本颜色认识 RGB

我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.

我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示 为 00-FF).数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.设置文本颜色

代码语言：javascript代码运行次数：0运行复制color: red;

color: #ff0000;

color: rgb(255, 0, 0); 鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.

color 属性值的写法：

预定义的颜色值(直接是单词)[最常用] 十六进制形式RGB 方式 十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.

#ff00ff => #f0f

代码语言：javascript代码运行次数：0运行复制

2.2 文本对齐控制文字水平方向的对齐

不光能控制文本对齐,也能控制图片等元素居中或者靠右

代码语言：javascript代码运行次数：0运行复制text-align:[值];center：居中对齐left： 左对齐right： 右对齐【案例】：

代码语言：javascript代码运行次数：0运行复制

2.3 文本装饰代码语言：javascript代码运行次数：0运行复制text-decoration: [值];常用取值：

underline： 下划线none： 啥都没有. 可以给 a 标签去掉下划线.overline ：上划线. [不常用]line-through： 删除线 [不常用]【案例】：

代码语言：javascript代码运行次数：0运行复制

2.4 文本缩进控制段落的 首行 缩进 （其他行不影响）

代码语言：javascript代码运行次数：0运行复制text-indent: [值]单位可以使用 px 或者 em使用 em 作为单位更好，1 个 em 就是当前元素的文字大小.缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)【案例】：

代码语言：javascript代码运行次数：0运行复制

2.5 行高行高指的是上下文本行之间的基线距离.

HTML 中展示文字涉及到这几个 基准线

顶线中线基线 (相当于英语四线格的倒数第二条线)底线内容区：底线和顶线包裹的区域，即下图深灰色背景区域

image-20250226163611742 其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离

代码语言：javascript代码运行次数：0运行复制line-height: [值]注意1: 行高 = 上边距 + 下边距 + 字体大小

上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px【案例】

代码语言：javascript代码运行次数：0运行复制

效果如下：

image-20250226163826162注意2： 行高也可以取 normal 等值

这个取决于浏览器的实现. chrome 上 normal 为 21 px注意3： 行高 = 元素高度, 就可以实现文字居中对齐

代码语言：javascript代码运行次数：0运行复制

效果如下：

image-202502261642175863. 背景属性属性

描述

background-color

背景色

background-image

背景图

background-repeat

背景图平铺方式

background-position

背景图位置

background-size

背景图尺寸

background-attachment

背景图固定

background

背景图复合属性

3.1 背景颜色代码语言：javascript代码运行次数：0运行复制background-color: [指定颜色] 默认是 transparent（透明）的，可以通过设置颜色的方式修改

代码语言：javascript代码运行次数：0运行复制

3.2 背景图片代码语言：javascript代码运行次数：0运行复制background-image: url(...);比 image 更方便控制位置(图片在盒子中的位置)

注意:

url 不要遗漏.url 可以是绝对路径，也可以是相对路径url 上可以加引号, 也可以不加.【案例】

代码语言：javascript代码运行次数：0运行复制

3.3 背景平铺平铺：就是盒子太大，但是图片只有一张，那么就会复制图片填充这个盒子（默认平铺效果）

代码语言：javascript代码运行次数：0运行复制background-repeat: [平铺方式]重要取值:

repeat: 平铺no-repeat: 不平铺，只显示一张背景图片，显示在盒子的左上角repeat-x: 水平平铺repeat-y: 垂直平铺默认是 repeat. 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.

【案例】

image-202502262043258063.4 背景位置由于背景图默认是在左上角的，但是我们可以通过这个来调整背景图的位置

代码语言：javascript代码运行次数：0运行复制background-position: x, y;作用：修改图片的位置，参数有三种风格:

方位名词: (top, left, right, bottom)精确单位: 坐标或者百分比(以左上角为原点) ，数字 +px（正负都可以）混合单位: 同时包含方位名词和精确单位代码语言：javascript代码运行次数：0运行复制

注意

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中. 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂 直居中)关于坐标系

计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).

image-202502261804120813.5 背景尺寸代码语言：javascript代码运行次数：0运行复制background-size: length|percentage|cover|contain;可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px也可以填百分比: 按照父元素的尺寸设置.cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.代码语言：javascript代码运行次数：0运行复制

注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.

contain：

image-20250226180625549cover:

image-20250226180657902结论：

cover：用于等比放大背景图以完全覆盖背景区，可能背景图片部分看不到contain：用于等比缩小背景图（背景图需要大于被放的块，否则背景图任然会被放大）百分比：根据盒子尺寸计算图片大小3.6 背景固定代码语言：javascript代码运行次数：0运行复制background-attachment: fixed;背景不会随着元素的内容滚动3.7 背景复合属性属性名：background

属性值：背景色 背景图 平铺方式 背景图位置/缩放 背景图固定 （空格隔开各个属性值，不区分顺序）

如下：

image-202502262112326234. 圆角矩形通过 border-radius 使边框带圆角效果.

4.1 基本用法代码语言：javascript代码运行次数：0运行复制border-radius: length;length 是内切圆的半径. 数值越大, 弧线越强烈

image-20250226181357647如下：

代码语言：javascript代码运行次数：0运行复制

上面代码中的 border 在下面的盒模型那里会说的，可以慢慢看4.2 生成圆形代码语言：javascript代码运行次数：0运行复制div{

width: 100px;

height: 150px;

border: 2px solid red;

border-radius: 50%;

}4.3 生成矩形让 border-radius 的值为矩形高度的一半即可

代码语言：javascript代码运行次数：0运行复制div{

width: 100px;

height: 50px;

border: 2px solid red;

border-radius: 50px;

}效果如下：

image-202502261828459064.4 展开写法border-radius 是一个复合写法,实际上可以针对四个角分别设置

代码语言：javascript代码运行次数：0运行复制border-radius:2em;等价于

代码语言：javascript代码运行次数：0运行复制border-top-left-radius:2em;

border-top-right-radius:2em:

border-bottom-right-radius:2em:border-bottom-left-radius:2em;

border-radius:10px 20px30px 40px;等价于(按照顺时针排列)

代码语言：javascript代码运行次数：0运行复制border-top-left-radius:10px:

border-top-right-radius:20px:

border-bottom-right-radius:30px:

border-bottom-left-radius:40px;5. 查看 CSS 属性 -Chrome 调试工具一般都是用 Chrome 浏览器进行调试，用其他浏览器调试有时候会出现效果与代码不符的情况

打开 Chrome 调试工具的方法

直接按 F12 键鼠标右键页面 => 检查元素标签页含义

elements查看标签结构console 查看控制台source 查看源码+断点调试network 查看前后端交互过程application 查看浏览器提供的一些扩展功能(本地存储等)Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究elements 标签页使用

ctrl+ 滚轮进行缩放，ctrl+0 恢复原始大小,使用 左上角 箭头选中元素右侧可以查看当前元素的属性,包括引入的类右侧可以修改选中元素的 css 属性，例如颜色：可以点击颜色图标，弹出颜色选择器，修改颜色。例如字体大小可以使用方向键来微调数值。注意：此处的修改不会影响代码,刷新就还原了如果 CSS 样式写错了,也会在这里有提示 ！！！image-202502261835119556. 元素的显示模式 网页中的 HTML 标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。其中元素显示模式就是元素(标签)以什么方式进行显示，比如

自己占一行，比如一行可以放多个 等。

HTML 元素一般分为块元素和行内元素两种类型。有的资料也有行内块元素的说法。6.1 块级元素h1 - h6、p、 div、 ul、 ol、 li …，其中 其中 标签是最典型的 块元素 特点:

独占一行高度, 宽度, 内外边距, 行高都可以控制.宽度默认是父级元素宽度的 100% (和父元素一样宽)是一个容器(盒子)， 里面可以放 行内 和 块级 元素代码语言：javascript代码运行次数：0运行复制

注意:

文字类的元素内不能使用块级元素p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div同理，

~

等都是文字类块级标签，里面也不能放其他块级元素比如：

代码语言：javascript代码运行次数：0运行复制

蛤蛤

从上面的示例可以看到当把块级元素

放到文字内的元素

中时，浏览器解析时会把它单独拿出来，同时设置的样式也不能生效。6.2 行内元素/内联元素常见的元素:

a、strong、b、em、i、del、s、ins、u、span，其中 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。特点:

不独占一行，一行可以显示多个设置高度、宽度、行高无效左右外边距有效(上下无效)，内边距 有效,默认宽度就是本身的内容行内元素只能容纳文本和其他行内元素，不能放块级元素代码语言：javascript代码运行次数：0运行复制

child1

child2

注意:

a 标签中不能再放a 标签(虽然 chrome 不报错, 但是最好不要这么做).特殊情况下：a标签里可以放块级元素，但是更建议先把 a 转换成块级元素. 行内元素和块级元素的区别

块级元素独占一行，行内元素不独占一行块级元素可以设置宽高，行内元素不能设置宽高,块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置6.3 行内块元素在行内元素中有几个特殊的标签例如 、 、 ，它们同时具有块元素和行内元素的特点。 称它们为行内块元素。

行内块元素特点

和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。

默认宽度就是它本身内容的宽度(行内元素特点)。

高度，行高、外边距以及内边距都可以控制(块级元素特点)。

【案例】

代码语言：javascript代码运行次数：0运行复制

效果如下：

image-202502261950363666.5 元素显示模式总结元素模式

元素排列

设置样式

默认宽度

包含

块级元素

一行只能一个

可以设置宽高

父级容器的100%

可包含任何标签

行内元素

一行可以多个

不能设置宽高

本身内容的宽度

可包含文本和行内元素

行内块元素

一行可以多个

可以设置宽高

本身内容的宽度

-

6.4 改变显示模式 特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性。比如想要增加链接 的触发范围

使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素,也可以把 a,span 等变成块级元素

display:block 改成块级元素[常用]display:in1ine 改成行内元素[很少用]display:inline-block 改成行内块元素【案例】

代码语言：javascript代码运行次数：0运行复制

111

222

【★,°:.☆(￣▽￣)/$:.°★ 】那么本篇到此就结束啦，如果有不懂 和 发现问题的小伙伴可以在评论区说出来哦，同时我还会继续更新关于【Linux】的内容，请持续关注我 ！！

上一篇: 黄晓明定居哪里 下一篇: 怎么让电脑蓝屏？使用按快捷键让Win10蓝屏