HTML

结构

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页主体
  </body>
</html>

html：整个网页。
head：网页头部。可以理解成存放给浏览器看的信息，例如CSS。
- title：网页标题。
body：网页主体。可以理解成存放给用户看的信息，例如图片、文字

标签语法

标签要成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/

示例代码：

1	<strong>需要加粗的文字<strong>

在有些资料会说：标签分为双标签和单标签<br>和<hr>。

我认为存在争议。
实际上，<br>和<hr>，是历史遗留问题导致的不规范标签。

标签的关系

父子关系(嵌套关系)
1
2
3
<html>
<head></head>
</html>
兄弟关系(并列关系)
1
2
<head></head>
<body></body>

注释

1	<!-- 我是 HTML 注释 -->

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：

文字加粗
字号逐渐减小
独占一行(换行)

段落标签

<p>段落</p>

特点：

独占一行
段落之间存在间隙

文本格式化标签

为文本添加特殊格式，以突出重点。

加粗
<strong>加粗</strong>
<b>加粗</b>
倾斜
<em>倾斜</em>
<i>倾斜</i>
下划线
<ins>下划线</ins>
<u>下划线</u>
删除线
<del>删除线</del>
<s>删除线</s>

图像标签

作用

插入图片。

src属性

src用于指定图像的位置和名称，是<img>的必填属性。

1	<img src="图片的URL">

其他属性

属性	作用	说明
`alt`	替换文本	图片无法显示的时候显示的文字
`title`	提示文本	鼠标悬停在图片上面的时候显示的文字
`width`	图片的宽度	值数字，没有单位
`height`	图片的高度	值数字，没有单位

属性语法

属性名=“属性值”
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

超链接标签

点击跳转到其他页面。

1	<a href="https://www.baidu.com">跳转到百度</a>

注意：

href属性值是跳转地址，是超链接的必须属性。
默认在当前窗口跳转页面，添加target="_blank实现新窗口打开页面。
href属性值写为#，表示空链接，页面不会跳转，在当前页面刷新一次。

列表

无序列表

布局排列整齐的"不需要规定顺序"的区域。

ul嵌套li，ul是无序列表，li是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

注意事项：

ul标签里面只能包含li标签。
li标签里面可以包含任何内容。

有序列表

布局排列整齐的"需要规定顺序"的区域。

ol嵌套li，ol是有序列表，li是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

注意事项：

ol标签里面只能包含li标签。
li标签里面可以包含任何内容。

定义列表

dl嵌套dt和dd。
dl是定义列表，dt是定义列表的标题，dd是定义列表的描述详情。

示例代码：

<dl>
    <dt>列表-1</dt>
    <dd>列表详情-11</dd>
    <dd>列表详情-12</dd>
    <dt>列表-2</dt>
    <dd>列表详情-21</dd>
    <dd>列表详情-22</dd>
    <dd>列表详情-23</dd>
</dl>

运行结果：

注意事项：

dl里面只能包含dt和dd。
dt和dd里面可以包含任何内容。

表格

基本使用

table嵌套tr，tr嵌套td/th。

标签	说明
`table`	表格
`tr`	行
`th`	表头单元格
`td`	内容单元格

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

解释说明：表格默认没有边框线，使用border属性可以为表格添加边框线。

表格结构标签

用表格结构标签可以把内容划分区域，让表格结构更清晰，语义更清晰。表格结构标签也可以省略。

标签	含义	说明
`thead`	表格头部	表格头部内容
`tbody`	表格主体	主要内容区域
`tfoot`	表格底部	汇总信息区域

合并单元格

将多个单元格合并成一个单元格。

步骤：

明确合并的目标。
保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量)。
- 跨行合并，保留最上单元格，添加属性rowspan。
- 跨列合并，保留最左单元格，添加属性colspan。
删除其他单元格。

注意：不能跨表格结构标签(thead、tbody、tfoot)合并单元格。

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

表单

概述

作用：收集用户信息。

使用场景：

登录页面
注册页面
搜索区域

input

type属性

input标签的type属性值不同，功能不同。

1	<input type="..." >

type属性值	说明
text	文本框用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

placeholder

占位文本：提示信息，文本框和密码框都可以使用。

1	<input type="..." placeholder="提示信息">

单选框

1 2	<input type="radio" name="gender" checked> 男 <input type="radio" name="gender"> 女

属性	作用	说明
`name`	控件名称	控件分组，同组只能选中一个(单选功能)。
`checked`	默认选中	属性名和属性值相同，简写为一个单词。

多选框

多选框也叫复选框，默认选中：checked。

1
2
3

<input type="checkbox" name="have" value="Bike" checked>I have a bike<br/>
<input type="checkbox" name="have" value="Car">I have a car<br/>
<input type="checkbox" name="have" value="Boat">I have a boat

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。

1	<input type="file" multiple>

select

select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。

默认显示第一项，selected属性实现"默认选中"功能。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

textarea

多行输入文本的表单控件。

1	<textarea>默认内容</textarea>

label

作用

某个标签的说明文本。

用法一

label标签只包裹内容，不包裹表单控件。
设置label标签的for属性值和表单控件的id属性值相同。

1 2	<input type="radio" id="man"> <label for="man">男</label>

用法二

使用label标签包裹文字和表单控件，不需要属性。

1	<label><input type="radio"> 女</label>

扩大点击范围

当一个label标签与表单控件关联后，用户可以点击label标签内的任何地方来激活对应的控件。下面是一个简单的例子，展示了如何为一个文本框创建一个带有扩大点击范围的label标签：

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
</form>

在这个例子中，label标签的for属性值与输入字段的id相匹配，这样就建立了两者之间的联系。现在，用户既可以点击"用户名:"这几个字，也可以直接点击输入框本身，以将焦点设置到该输入框上。
同样的方法也适用于其他类型的表单控件。

button

1	<button type="">按钮</button>

type 属性值	说明
`submit`	提交按钮点击后可以提交数据到后台(默认功能)
`reset`	重置按钮点击后将表单控件恢复默认值
`button`	普通按钮默认没有功能一般配合JavaScript使用

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

语义

无语义的布局标签

布局网页，划分网页区域，摆放内容。

div：独占一行
span：不换行

1 2	<div>div 标签，独占一行</div> <span>span 标签，不换行</span>

有语义的布局标签

标签名	语义
`header`	网页头部
`nav`	网页导航
`footer`	网页底部
`aside`	网页侧边栏
`section`	网页区块
`article`	网页文章

其他标签

换行

换行：br

水平线

水平线：hr

音频

1	<audio src="音频的URL"></audio>

属性	作用	特殊说明
`src` (必须属性)	音频URL	支持格式：mp3、ogg、wav
`controls`	显示音频控制面板
`loop`	循环播放
`autoplay`	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

书写HTML5属性时，如果属性名和属性值相同，可以简写为一个单词。

1 2	<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 --> <audio src="./media/music.mp3" controls loop autoplay></audio>

视频

1	<video src="视频的 URL"></video>

属性	作用	特殊说明
`src`(必须属性)	视频URL	支持格式：mp4、webm.、ogg
`controls`	显示视频控制面板
`loop`	循环播放
`muted`	静音播放
`autoplay`	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

1 2	<!-- 在浏览器中，想要自动播放，必须有 muted 属性 --> <video src="./media/vue.mp4" controls loop muted autoplay></video>

字符实体

显示结果	描述	实体名称
	空格	` `
`<`	小于号	`<`
`>`	大于号	`>`

CSS

引入方式

内部样式表
CSS代码写在style标签里面。
外部样式表
CSS代码写在单独的CSS文件中。
在HTML使用link标签引入。
1
<link rel="stylesheet" href="./my.css">

行内样式
CSS写在标签的style属性值里。

1	<div style="color: red; font-size:20px;">这是 div 标签</div>

文字控制属性

字体样式(是否倾斜)

属性名：font-style
属性值

正常(不倾斜)：normal。
倾斜：italic。

行高

line-height

属性名：line-height
属性值

数字 + px
数字(当前标签font-size属性值的倍数)

line-height: 30px;

/* 当前标签字体大小为16px */
line-height: 2;

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

div {
  height: 100px;
  background-color: skyblue;

  /* 注意：只能是单行文字垂直居中 */
  line-height: 100px;
}

字体族

属性名：font-family
属性值：字体名

1	font-family: 楷体;

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

1	font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font复合属性

概述

font是一个复合属性，允许开发者通过单个声明来设置多个与字体相关的CSS属性。
这些属性包括字体风格、字体粗细、字体大小、行高以及字体族。

语法

各个值必须按照特定的顺序书写，且至少需要指定字体大小和字体族两个属性。

1
2
3

selector {
  font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

font-style：定义字体是否倾斜，可选值为normal(默认)、italic或oblique。
font-variant：定义小型大写字母，通常很少用到，默认值是normal，另一个可能的值是small-caps。
font-weight：定义字体的粗细，可以是数字400(正常)或700(加粗)，也可以是关键字如normal、bold等。
font-size：定义字体大小，单位可以是像素(px)、点(pt)、em、rem等。
line-height：定义行间距，通常是一个无单位的数值或者是与font-size相同的单位。
font-family：定义字体族，可以是一个具体的字体名或者通用字体族。

注意事项

在使用font复合属性时，font-size和font-family是必需的。
如果省略了其他属性，那么它们将被设置为默认值。
font-variant很少在实践中单独使用，因此如果不需要特别的小型大写样式，通常可以直接省略。

示例

假设我们想要设置网页中所有段落文字的公共样式，使其具有以下特点：

斜体显示
加粗
字号30px
行高为字号的2倍
使用楷体字体

1
2
3

p {
  font: italic 700 30px/2 楷体;
}

italic表示字体以斜体形式展示。
700是字体重量，表示加粗。
30px设置了字体大小。
2设置了行高为字体大小的两倍。
楷体指定了使用的字体族。

文本缩进

属性名：text-indent
属性值：

数字 + px
数字 + em
推荐em，1em = 当前标签的字号大小

1
2
3

p {
  text-indent: 2em;
}

文本对齐方式

文本对齐方式，控制内容水平对齐方式。

属性名：text-align
属性值：

left，左对齐(默认)。
center，居中对齐。
right，右对齐。
justify，两端对齐(每行中的文字和空格会被拉伸，使文本左右边缘都与容器对齐)。

1	text-align: center;

注意！text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

<html>

<head>
    <style>
        .container {
            width: 50%;
            /* 容器宽度为页面宽度的一半 */
            margin: auto;
            /* 水平居中整个容器 */
            border: 1px solid #ccc;
            /* 添加边框以便更好地可视化 */
            padding: 20px;
            /* 内边距 */
        }

        .container h1,
        .container p {
            text-align: center;
            /* 文本居中对齐 */
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这是一个关于我的个人介绍。</p>
    </div>
</body>

</html>

运行结果：

文本修饰线

属性名：text-decoration
属性值：

none 无
underline 下划线
line-through 删除线
overline 上划线

color 文字颜色

颜色表示方式	属性值	说明
颜色关键字	颜色英文单词	red、green、blue…
rgb表示法	rgb(r, g, b)	r,g,b表示红绿蓝三原色，取值：0 - 255
rgba表示法	rgba(r, g, b, a)	a表示透明度，取值：0 - 1
十六进制表示法	#RRGGBB	#000000, #ffcc00, 简写：#000, #fc0

其实只要属性值为颜色，都可以使用上述四种颜色表示方式。

背景属性

背景图

属性名：background-image。
属性值：url(背景图URL)。
注意：背景图默认有平铺(复制)效果。

div {
  width: 400px;
  height: 400px;

  background-image: url(./images/1.png);
}

平铺方式

属性名：background-repeat
属性值：

repeat 默认选项，表示背景图像会在水平和垂直方向上重复显示。
no-repeat 表示背景图像不会重复显示。
repeat-x 表示背景图像仅在水平方向上重复显示。
repeat-y 表示背景图像仅在垂直方向上重复显示。

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);

  background-repeat: no-repeat;
}

背景图位置

属性名：background-position
属性值：水平方向位置垂直方向位置

关键字：

关键字	位置
`left`	左侧
`right`	右侧
`center`	居中
`top`	顶部
`bottom`	底部

坐标：

水平：正数向右；负数向左。
垂直：正数向下；负数向上。

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;

  background-position: center bottom;
  background-position: 50px -100px;
  background-position: 50px center;
}

背景图缩放

作用：设置背景图大小
属性名：background-size
属性值：

关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白。
百分比：根据盒子尺寸计算图片大小。
数字 + 单位。

div {
  width: 500px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;
  
  background-size: cover;
  background-size: contain;
}

背景图固定

作用：背景不会随着元素的内容滚动。
属性名：background-attachment
属性值：

scroll
fixed
local

body {
  background-image: url(./images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

点击链接体验

背景复合属性

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

div {
  width: 400px;
  height: 400px;

  background: pink url(./images/1.png) no-repeat right center/cover;
}

显示方式

作用

布局网页的时候，根据标签的显示方式选择合适的标签摆放内容。

属性

属性：display

属性值	效果
block	块级级
inline-block	行内块
inline	行内

效果

块级元素

独占一行
宽度默认是父级的100%
添加宽高属性生效

行内元素

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开

行内块元素

一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开

选择器

标签选择器

使用标签名作为选择器，同名标签设置相同的样式。

例如：p、h1、div、a、img。

<style>
  p {
    color: red;
  }
</style>

类选择器

步骤：

定义类选择器，.类名。
使用类选择器，标签添加class="类名"。

<style>
/* 定义类选择器 */
.red {
    color: red;
}
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名。
一个类选择器可以供多个标签使用。
一个标签可以使用多个类名。

id选择器

步骤：

定义id选择器，#id名。
使用id选择器，标签添加id="id名"。

<style>
/* 定义 id 选择器 */
#red {
    color: red;
}
</style>

<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

注意：

同一个id选择器在一个页面只能使用一次。
在实际中，id选择器一般配合JavaScript使用，很少用来设置CSS样式。

通配符选择器

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。

1
2
3

* {
  color: red;
}

复合选择器

定义

由两个或多个基础选择器，通过不同的方式组合而成。

后代选择器

定义：选中某元素的后代元素。
语法：父选择器子选择器 { CSS 属性 }，父子选择器之间用空格隔开。

<style>
    div span {
        color: red;
    }
</style>

<span> span 标签</span>
<div>
    <span>这是 div 的儿子 span</span>
</div>

子代选择器

定义：选中某元素的子代元素(最近的子级)。
语法：父选择器 > 子选择器 { CSS 属性 }，父子选择器之间用>隔开。
注意：子选择器仅是指它的直接后代，而后代选择器是作用于所有子后代元素。

<style>
    div>span {
        color: red;
    }
</style>

<div>
    <span>这是 div 里面的 span</span>
    <p>
        <span>这是 div 里面的 p 里面的 span</span>
    </p>
</div>

并集选择器

定义：选中多组标签设置相同的样式。
语法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用,隔开。

<style>
    div,
    p,
    span {
        color: red;
    }
</style>

<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

交集选择器

定义：选中同时满足多个条件的元素。
语法：选择器1.选择器2 { CSS 属性 }，选择器之间连写。
注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

<style>
    p.box {
        color: red;
    }
</style>

<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

伪类选择器

什么是伪类选择器

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

常见伪类选择器

鼠标悬停状态

鼠标悬停状态：选择器:hover { CSS 属性 }。

<style>
    a:hover {
        color: red;
    }

    .box:hover {
        color: green;
    }
</style>

<a href="#">a 标签</a>
<div class="box">div 标签</div>

超链接伪类

选择器	作用
`:link`	访问前
`:visited`	访问后
`:hover`	鼠标悬停
`:active`	点击时(激活)

如果要给超链接设置以上四个状态，需要按L V H A的顺序书写。

a {
    color: red;
}

a:hover {
    color: green;
}

结构伪类选择器

什么是结构伪类选择器

结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素，从而减少对HTML元素的id属性和class属性的依赖。

伪类选择器	作用
`:first-child`	用来定位一组兄弟元素中的第一个元素
`:last-child`	用来定位一组兄弟元素中的最后一个元素
`:nth-child(n)`	用来定位一组兄弟元素中的第 n 个元素
`:nth-last-child(n)`	用来定位一组兄弟元素中倒序方式的第 n 个元素
`:first-of-type`	用来定位一组同类型的兄弟元素中的第一个元素
`:last-of-type`	用来定位一组同类型的兄弟元素中的最后一个元素
`:nth-of-type(n)`	用来定位一组同类型的兄弟元素中的第 n 个元素
`:nth-last-of-type(n)`	用来定位一组同类型的兄弟元素中倒序方式的第 n 个元素
`:only-child`	用来定位一个没有任何兄弟元素的元素
`:only-of-type`	用来定位一个没有任何同类型兄弟元素的元素
`:empty`	用来定位一个没有子级元素的元素，并且该元素也没有任何文本内容
`:root`	用来定位 HTML 页面中的根元素(``)

:first-child 与 :last-child

:first-child伪类可以使用:nth-child(n)伪类改写为:nth-child(1)。
:last-child伪类可以使用:nth-last-child(n)伪类改写为:nth-last-child(1)。

:first-child伪类和:last-child伪类经常会引起误解。例如td:first-child是用来定位所有<td>元素中第一个作为子级元素的，而不是定位<td>元素的第一个子级元素。

示例代码：

<html>

<head>
</head>

<body>
    <style>
        td:first-child {
            background-color: yellow;
            /* 背景颜色为黄色 */
        }
    </style>

    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>

</body>

</html>

运行结果：

解释说明：我们使用td:first-child选择器，那么它会选择每个<tr>行中第一个出现的<td>元素，即"单元格1"和"单元格4"。这并不是指<td>元素内部的第一个子元素，而是指<td>作为其父元素(这里是<tr>)的第一个子元素。

:first-of-type 与 :last-of-type

:first-of-type伪类与:last-of-type伪类的用法一定要和:first-child伪类与:last-child伪类的用法区分开。

以:first-of-type伪类和:first-child伪类为例来说明：

:first-of-type伪类是定位一组同类型的兄弟元素中的第一个元素，不管这个元素在兄弟元素中的位置如何。
:first-child伪类是定位一组兄弟元素中的第一个元素，这些兄弟元素不一定是同类型的。

示例代码：

<html>

<head>
</head>

<body>
    <style>
        p:first-child {
            color: red;
            /* 将文本颜色设置为红色 */
        }

        p:first-of-type {
            color: blue;
            /* 将文本颜色设置为蓝色 */
        }
    </style>

    <div>
        <div>我是一个div。</div>
        <p>我是段落1。</p>
        <p>我是段落2。</p>
        <span>我是一个span。</span>
    </div>

</body>

</html>

运行结果：

解释说明：

p:first-child不会选择任何元素，因为第一个<p>元素不再是其父元素的第一个子元素。
p:first-of-type会选择第一个<p>元素，因为它仍然是兄弟元素中第一个出现的<p>类型的元素。

:first-child关注的是元素的位置，即是否为第一个子元素；而:first-of-type关注的是元素的类型，即是否为同类型中的第一个元素。
同样的逻辑也适用于:last-child和:last-of-type伪类。

:nth-child(n) 与 :nth-last-child(n)

:nth-child(n)伪类和:nth-last-child(n)伪类都是CSS3版本新增的选择器，这两个选择器的用法基本上是一致的。区别在于:nth-last-child(n) 伪类是倒序方式定位元素，也就是说，:nth-last-child(n)伪类是从一组元素的结尾开始的。

以:nth-child(n)伪类为例进行讲解，:nth-child(n)伪类中的n参数的含义具有3种情况：

数字值：任意一个大于0的正整数。例如#example td:nth-child(1)表示定位ID为example的父元素下所有<td>元素中的第一个元素。
关键字：odd表示奇数，等同于:nth-child(2n)；even表示偶数，等同于:nth-child(2n+1)。
格式为(an+b)公式：a表示周期的长度(步长)，n表示计数器(从0开始)，而b则表示偏移值。

:nth-child(n)伪类与:nth-last-child(n)伪类和:nth-of-type(n)伪类与:nth-last-of-type(n)伪类的区别，类似于:first-of-type伪类与:last-of-type伪类和:first-child伪类与:last-child伪类的区别。

:empty

:empty伪类是用来定位没有任何子级元素或文本内容的元素。

示例代码：

<html>

<head>
</head>

<body>
    <style>
        div:empty {
            border: 1px solid red;
            /* 添加红色边框 */
        }
    </style>

    <div>
        <div></div>
        <div> </div>
        <div><!-- 这是一个注释 --></div>
    </div>

</body>

</html>

解释说明：

第一个<div></div>会有一个红色边框。
第二个<div> </div>不会有红色边框，因为它包含空白字符。
第三个<div></div>也会有一个红色边框，因为注释不影响:empty伪类的选择。

伪元素选择器

作用：创建虚拟元素(伪元素)，用来摆放装饰性的内容。

选择器	说明
`::before`	在元素前添加一个伪元元素
`::after`	在元素后添加一个伪元元素

div::before {
  content: "before 伪元素";
}
div::after {
  content: "after 伪元素";
}

示例代码：

<html>

<head>
</head>

<body>
    <style>
        .box {
            position: relative;
            /* 确保伪元素定位相对父元素 */
            padding: 10px;
            /* 给盒子内部一些空间 */
            background-color: lightblue;
        }

        .box::before {
            content: "开头的伪元素";
            /* 设置伪元素的内容 */
            display: block;
            /* 将伪元素显示为块级元素 */
            color: red;
            /* 设置伪元素的颜色 */
            font-weight: bold;
            /* 设置字体加粗 */
        }

        .box::after {
            content: "结尾的伪元素";
            /* 设置伪元素的内容 */
            display: block;
            /* 将伪元素显示为块级元素 */
            color: green;
            /* 设置伪元素的颜色 */
            font-weight: bold;
            /* 设置字体加粗 */
        }
    </style>

    <div>
        <div class="box">这是主要内容</div>
    </div>

</body>

</html>

解释说明：

.box::before：在.box元素的内容之前插入了一个红色的、加粗的文本"开头的伪元素"。因为设置了display: block;，这个伪元素将会以块级元素的形式出现。
.box::after：在.box元素的内容之后插入了一个绿色的、加粗的文本"结尾的伪元素"。同样地，由于设置了display: block;，这个伪元素也是以块级元素的形式出现。

注意事项

content属性：必须设置content属性来定义伪元素的内容。如果不需要显示任何内容，可以将content设为空字符串""。
默认显示模式：伪元素默认是行内显示模式inline。如果需要改变显示模式，比如改为块级元素block，可以通过display属性来实现。
权重：伪元素的选择器权重与标签选择器相同，因此在优先级计算时要考虑到这一点。如果需要提高优先级，可以结合类名、ID 或其他选择器来使用。

通过这种方式，伪元素提供了一种灵活的方式来增强网页布局和视觉效果，而不必修改实际的文档结构。

继承层叠优先

CSS的三个特性：

继承性
层叠性
优先级

继承性

子级默认继承父级的文字控制属性，注意是文字控制属性。

如果标签有默认文字样式不会继承。例如：a标签的颜色、标题的字体大小。

常见的文字属性有：

描述	属性
字体大小	`font-size`
字体粗细	`font-weight`
字体倾斜	`font-style`
行高	`line-height`
字体族	`font-family`
字体复合属性	`font`
文本缩进	`text-indent`
文本对齐	`text-align`
修饰线	`text-decoration`
颜色	`color`

层叠性

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性。
不同的属性会叠加：不同的CSS属性都生效。

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

<style>
    div {
        color: red;
        font-weight: 700;
    }

    div {
        color: green;
        font-size: 30px;
    }
</style>

<div>div 标签</div>

优先级

什么是优先级

优先级，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

<style>
    div {
        color: red;
    }

    .box {
        color: green;
    }
</style>

<div class="box">div 标签</div>

优先级顺序

优先级顺序(从低到高)：

通配符选择器 (*)
元素(标签)选择器 (例如 p, div 等)
类选择器 (.class)
属性选择器 ([attribute])
伪类选择器 (例如 :hover, :first-child 等)
ID 选择器 (#id)
行内样式 (直接写在元素的 style 属性中)
!important 声明

当多个声明具有相同的权重时，最后定义的样式会覆盖之前的样式。如果使用了!important标记，那么该声明将拥有最高优先级，除非另一个同样标记为!important的声明有更高的权重。

<style>
    /* 通配符选择器 */
    * {
        color: gray;
        /* 灰色 */
    }

    /* 标签选择器 */
    p {
        color: blue;
        /* 蓝色 */
    }

    /* 类选择器 */
    .text {
        color: green;
        /* 绿色 */
    }

    /* ID选择器 */
    #container .text {
        color: red;
        /* 红色 */
    }


    /* !important声明 */
    .text {
        color: purple !important;
        /* 紫色 */
    }
</style>

<p class="text" style="color: yellow;">这是一段文本。</p>

在上文的例子中，对于<p>标签内的文本颜色，最终生效的颜色将是紫色，因为.text类选择器包含了!important声明，这使得它超越了所有其他没有!important的声明，包括行内样式。
如果没有!important声明，那么黄色将会被应用，因为它是由行内样式定义的，而行内样式的优先级高于外部样式表中的ID选择器、类选择器和标签选择器等。

复合选择器(叠加)

复合选择器指的是由多个简单选择器通过组合符(如空格、>、+、~ 等)连接而成的选择器。
在计算优先级时，每个简单选择器都有其特定的权重值。这些权重值可以相加来决定复合选择器的整体优先级。

权重计算规则如下：

每个!important声明增加一个无限大的权重。
每个ID选择器(#id)增加100的权重。
每个类选择器(.class)、属性选择器([attribute])或伪类(:pseudo-class)增加10的权重。
每个元素(标签)选择器或伪元素(::pseudo-element)增加1的权重。
通配符选择器(*)和组合符本身不增加权重。

当多个选择器结合在一起形成复合选择器时，它们各自的权重会累加起来以确定整个选择器的优先级。

<style>
    /* 单个ID选择器 */
    #main {
        color: red;
        /* 权重为 100 */
    }

    /* 单个类选择器 */
    .content {
        color: green;
        /* 权重为 10 */
    }

    /* 复合选择器 - ID + 类 */
    #main .content {
        color: blue;
        /* 权重为 100 + 10 = 110 */
    }

    /* 复合选择器 - 类 + 标签 */
    .container p {
        color: yellow;
        /* 权重为 10 + 1 = 11 */
    }
</style>

<div id="main" class="container">
    <p class="content">这是一个段落。</p>
</div>

在上文，对于<p>标签内的文本颜色。#main .content 选择器的权重是 110，它将覆盖其他较低权重的选择器，所以文字颜色应该是蓝色。

盒子

组成

内容区域：width、height
内边距：padding 出现在内容与盒子边缘之间
边框线：border
外边距：margin 出现在盒子外面

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

解释说明：background-color，背景色，padding区域也会被填充。

边框线

border

属性名：border
属性值：边框线粗细线条样式颜色 (不区分顺序)

属性值	线条样线式
solid	实线
dashed	虚线
dotted	点线

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

单方向边框线

属性名：border-方位名词
属性值：边框线粗细线条样式颜色 (不区分顺序)

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

padding

作用：设置内容与盒子边缘之间的距离。
属性名：padding/padding-方位名词
多值写法：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

margin

作用：拉开两个盒子之间的距离
属性名：margin
与padding属性值写法、含义相同。

版心居中：左右margin值为auto(盒子要有宽度)

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

overflow

作用：控制溢出元素的内容的显示方式。
属性名：overflow

属性值	效果
hidden	溢出隐藏藏
scroll	溢出滚动动（无论否溢出，都显示示滚动动条位位置置）
auto	溢出滚动动（溢出才显示示滚动动条位位置置）

外边距问题

合并

垂直排列的兄弟元素，上下margin会合并，会取两个margin中的较大值生效。

解决方法：

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

塌陷

父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动。

示例代码：

<html>

<head>
</head>

<body>
    <style>
        .father {
            background-color: lightblue;
        }

        .son {
            margin-top: 50px;
            /* 设置子元素的上外边距 */
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>

    <div class="father">
        <div class="son"></div>
    </div>

</body>

</html>

运行结果：

三种解决方法：

取消子级margin，父级设置padding
通过给父元素添加padding-top来替代子元素的margin-top。

.father {
  background-color: lightblue;
  padding-top: 50px;  /* 使用padding代替margin */
}

.son {
  width: 100px;
  height: 100px;
  background-color: orange;
}

父级设置overflow: hidden
通过设置父元素的overflow属性为hidden，可以创建一个新的块格式化上下文(BFC)，从而防止外边距塌陷。

.father {
  background-color: lightblue;
  overflow: hidden;  /* 创建新的BFC，防止外边距塌陷 */
}

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

父级设置border-top
通过给父元素添加一个非零的border-top，也可以阻止外边距塌陷。

.father {
  background-color: lightblue;
  border-top: 1px solid transparent;  /* 透明边框，不影响视觉效果 */
}

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

圆角

作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px/百分比
提示：属性值是圆角半径
多值写法：从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

正圆形状：给正方形盒子设置圆角属性值为"宽高的一半 / 50%"。

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

胶囊形状：给长方形盒子设置圆角属性值为"盒子高度的一半"。

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子阴影

作用：给元素设置阴影效果
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量模糊半径扩散半径颜色内外阴影
注意：

X轴偏移量和 Y轴偏移量必须书写
默认是外阴影，内阴影需要添加 inset

div {
    width: 200px;
    height: 80px;
    background-color: orange;
    box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

浮动

操作方法

作用：让块元素水平排列。
属性名：float
属性值：

left：左对齐
right：右对齐

<html>

<head>
</head>

<body>
    <style>
        /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
        .one {
          width: 100px;
          height: 100px;
          background-color: brown;
      
          float: left;
        }
      
        .two {
          width: 200px;
          height: 200px;
          background-color: orange;
      
          /* float: left; */
      
          float: right;
        }
      </style>
      
      <div class="one">one</div>
      <div class="two">two</div>

</body>

</html>

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

标准流是指HTML文档中元素按照默认的布局规则进行排列。在标准流中，块级元素（如<div>）会垂直堆叠，每个新块从新的一行开始；而行内元素（如<span>）则会在同一行内水平排列，直到没有足够空间才会换行到下一行。这是浏览器默认处理元素布局的方式。

当一个元素被设置为浮动（使用float属性）或绝对定位（使用position: absolute;）时，它就脱离了标准流。这意味着：
不再占据原本的空间：该元素不会影响其他标准流中的元素的位置。例如，如果一个浮动的元素原来位于文档流中的某个位置，那么其他非浮动的元素会像这个浮动元素不存在一样进行布局。
可以与其他元素重叠：由于脱离了标准流，浮动元素可能会覆盖其他元素，除非采取措施来防止这种情况发生（例如使用clear属性或其他布局技巧）。

清除浮动

影响

当一个元素设置了float属性时，该元素会脱离标准流，导致它不会影响其父元素的高度。

如果浮动元素的父元素没有设置明确的高度，并且除了浮动元素之外没有其他内容，那么这个父元素可能会塌陷，即它的高度会缩小到0，从而造成布局错乱。

问题复现

<html>

<head>
</head>

<body>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }

        .right {
            float: right;
            width: 950px;
            height: 300px;
            background-color: orange;
        }

        .bottom {
            height: 100px;
            background-color: brown;
        }
    </style>

    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>


</body>

</html>

额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性clear: both。

clear: both;，使得这个额外的元素不能与任何浮动元素相邻，这样它就会被推到所有浮动元素下面，从而撑开父元素的高度。

<style>
.clearfix {
  clear: both;
}
</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>

单伪元素法

:after伪元素和clear: both;起到了同样的作用，但它不需要实际的HTML标记，更加语义化且简洁。

准备 after 伪元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

父级使用 clearfix 类

1	<div class="top clearfix"></div>

双伪元素法

:before可以帮助修复一些IE6/7中出现的外边距塌陷问题，而:after则负责清理浮动。这种方式比单伪元素更全面，适用于更多场景。

准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

父级使用 clearfix 类

1	<div class="top clearfix"></div>

overfow法

通过设置overflow属性为非visible值，可以强制浏览器创建一个新的块格式化上下文(BFC)。
在一个BFC中，元素的布局不会受到外部浮动的影响，而且该元素也会自动扩展以包围其内部的所有浮动元素，因此解决了高度塌陷的问题。

.top {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

Flex

什么是Flex

Flex，Flex布局，也被称为弹性布局，适合结构化布局场景，提供了强大的空间分布和对齐能力。

Flex布局不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

入门案例

示例代码：

<html>

<head>
</head>

<body>

    <head>
    </head>

    <style>
        .box {
            display: flex;
            justify-content: space-between;
            border: 1px solid #000;
        }

        .box div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

</body>

</html>

运行结果：

组成部分

给父元素设置display: flex，子元素可以自动挤压或拉伸。

弹性容器，Flex Container：设置了display: flex;或display: inline-flex;的元素。
弹性项目，Flex Items：弹性容器内的直接子元素。
主轴，Main Axis：默认情况下是水平方向，从左到右。可以通过flex-direction属性改变方向。
侧轴/交叉轴，Cross Axis：与主轴垂直的方向，默认情况下是垂直方向，从上到下。

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

例如，在上文，我们希望三个粉色方块在容器内均匀分布，并且两边有相等的空间，我们可以使用space-between值。

侧轴对齐方式

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
align-self：单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

如果我们要让这些方块在垂直方向上居中，可以设置align-items为center。

示例代码：

<style>
    .box {
        display: flex;
        align-items: center;
        height: 500px;
        border: 1px solid #000;
    }

    .box div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

对于单个元素，可以使用align-self来覆盖align-items的设置。比如，让其中一个方块靠底部对齐：

1
2
3

.box div:last-child {
  align-self: flex-end; /* 只针对最后一个div生效 */
}

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向。

属性名：flex-direction

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

示例代码：

<style>
    .box {
        display: flex;
        align-items: center;
        height: 500px;
        border: 1px solid #000;
        flex-direction: column;
    }

    .box div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

运行结果：

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用"父级剩余尺寸的份数"。

比如，我们想让第一个方块占据空间的一半，第二个方块占据空间的二分之一，第三个方块占据空间的二分之一。

<style>
    .box {
        display: flex;
        align-items: center;
        height: 500px;
        border: 1px solid #000;
    }

    .box div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    
    .box div:nth-child(1) { flex: 2; }
    .box div:nth-child(2) { flex: 1; }
    .box div:nth-child(3) { flex: 1; }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名：flex-wrap
属性值

wrap：换行
nowrap：不换行(默认)

当内容超出容器时，可以通过flex-wrap来允许弹性盒子换行。如果设置了wrap，则会根据需要将内容折成多行。

示例代码：

<style>
    .box {
        display: flex;
        align-items: center;
        height: 500px;
        width: 300px;
        border: 1px solid #000;
        flex-wrap: wrap
    }

    .box div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

行内对齐方式

属性名：align-content
注意：该属性对单行弹性盒子模型无效。

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弅性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

定位

概述

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

实现：

定位模式：position
边偏移：设置盒子的位置
- left
- right
- top
- bottom

相对定位

position: relative
特点：

不脱标，占用自己原来位置
显示模式特点保持不变
设置边偏移则相对自己原来位置移动

相对定位是相对于元素自身原始位置进行偏移，不会影响其他元素的位置。它仍然占据原来的空间。

<html>

<head>
</head>

<body>

    <div class="relative-box">
        我被相对定位了
    </div>

    <style>
        .relative-box {
            position: relative;
            top: 20px;
            /* 向下移动20像素 */
            left: 30px;
            /* 向右移动30像素 */
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>

</body>

</html>

在这个例子中，.relative-box会从其原本应该在的位置向下和向右分别移动20像素和30像素。

绝对定位

position: absolute
使用场景：子级绝对定位，父级相对定位。
特点：

脱标，不占位
显示模式具备行内块特点
设置边偏移则相对最近的已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置

<html>

<head>
</head>

<body>

    <div class="parent">
        <div class="absolute-child">
            我是绝对定位的孩子
        </div>
    </div>

    <style>
        .parent {
            position: relative;
            /* 父级需要设置为相对定位 */
            width: 300px;
            height: 200px;
            background-color: lightgreen;
        }

        .absolute-child {
            position: absolute;
            top: 10px;
            /* 距离父级顶部10像素 */
            right: 20px;
            /* 距离父级右侧20像素 */
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>

</body>

</html>

定位居中

实现步骤：

绝对定位。
水平、垂直边偏移为50%。
子级向左、上移动自身尺寸的一半。

即：左、上的外边距为尺寸的一半，transform: translate(-50%, -50%)。

<html>

<head>
</head>

<body>

    <div class="container">
        <div class="centered-img" style="background-color: blue; width: 100px; height: 100px"></div>
    </div>

    <style>
        .container {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: #f0f0f0;
        }

        .centered-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</body>

</html>

固定定位

position: fixed
场景：元素的位置在网页滚动时不会改变
特点：

脱标，不占位
显示模式具备行内块特点
设置边偏移相对浏览器窗口改变位置

固定定位与绝对定位类似，但它相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在相同的位置。

<html>

<head>
</head>

<body>

    <div class="fixed-header">
        我是一个固定的头部
    </div>

    <style>
        .fixed-header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #ddd;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</body>

</html>

堆叠层级z-index

作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名：z-index
属性值：整数数字 (默认值为0，取值越大，层级越高)

<html>

<head>
</head>

<body>

    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>

    <style>
        .box1,
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 50px;
            left: 50px;
        }

        .box1 {
            background-color: pink;
            z-index: 1;
            /* 盒子1在盒子2之下 */
        }

        .box2 {
            background-color: skyblue;
            top: 75px;
            left: 75px;
            z-index: 2;
            /* 盒子2在盒子1之上 */
        }
    </style>
</body>

</html>

参考资料：

https://www.bilibili.com/video/BV1kM4y127Li

https://www.cnblogs.com/zhengzhou/p/15566976.html

https://know.webhek.com/html5/html-dl-dt-dd.html

https://blog.csdn.net/qq_39921135/article/details/140561867

https://blog.csdn.net/u012110719/article/details/41171517

https://juejin.cn/post/7022056310409527327

文章作者: Kaka Wan Yifan

文章链接: https://kakawanyifan.com/12001

留言板

HTML

结构

标签语法

标签的关系

注释

标题标签

段落标签

文本格式化标签

图像标签

作用

src属性

其他属性

属性语法

超链接标签

列表

分类

无序列表

有序列表

定义列表

表格

基本使用

表格结构标签

合并单元格

表单

概述

input

type属性

placeholder

单选框

多选框

上传文件

select

textarea

label

作用

用法一

用法二

扩大点击范围

button

语义

无语义的布局标签

有语义的布局标签

其他标签

换行

水平线

音频

视频

字符实体

CSS

引入方式

文字控制属性

字体大小

字体样式(是否倾斜)

行高

line-height

单行文字垂直居中

字体族

font复合属性

概述

语法

注意事项

示例

文本缩进

文本对齐方式

文本修饰线

color 文字颜色

背景属性

背景图

平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

显示方式

作用

属性

效果

块级元素

行内元素

行内块元素

继承层叠优先