HTML5+CSS3学习笔记(五)
本系列更多文章,可以查看专栏 HTML+CSS学习笔记
文章目录
一、定位
定位(position)是一种高级的布局手段,通过设置position
属性值可以将元素放到页面任意位置。
1. position属性
- static: 默认值,元素静止不开启任何定位
- relative: 开启元素的相对定位
- absolute: 开启元素的绝对定位
- fixed: 开启元素的固定定位
- sticky: 开启元素的粘滞定位
下文中,如果提到开启定位,则指将position
设置为非默认值,即relative、absolute、fixed、sticky
均可。
2. 特点
定位类型 | 脱离文档流 | 参照元素 | 层级 | 滚动 | 其它变化 |
---|---|---|---|---|---|
相对定位(relative) | 不脱离 | 元素 原来的位置 \color{orange}{原来的位置} 原来的位置 | 提高 | 跟随滚动条滚动 | 不会影响本身是行内元素,还是块级元素 |
绝对定位(absolute) | 脱离 | 离它最近 \color{blue}{离它最近} 离它最近的 开启了定位 \color{blue}{开启了定位} 开启了定位的 祖先元素 \color{blue}{祖先元素} 祖先元素;若无,则默认为初始包含块 | 提高 | 跟随滚动条滚动 | 行内元素变块元素,宽度由内容撑开 \color{darkblue}{行内元素变块元素,宽度由内容撑开} 行内元素变块元素,宽度由内容撑开 |
固定定位(fixed) | 脱离 | 浏览器视口 \color{green}{浏览器视口} 浏览器视口 | 提高 | 不会 \color{purple}{不会} 不会跟随滚动条滚动 | 行内元素变块元素,宽度由内容撑开 \color{darkblue}{行内元素变块元素,宽度由内容撑开} 行内元素变块元素,宽度由内容撑开 |
粘滞定位(sticky) | 不脱离 | 距离最近 \color{red}{距离最近} 距离最近且 可滚动 \color{red}{可滚动} 可滚动的 祖先元素 \color{red}{祖先元素} 祖先元素 ;若无,则默认为浏览器视口 | 提高 | 跟随滚动条滚动, 但会固定在指定位置 \color{purple}{但会固定在指定位置} 但会固定在指定位置 | 不会影响本身是行内元素,还是块级元素 |
二、相对定位(relative)
position设置为relative后,不设置偏移量,不会对元素有任何影响
1. 偏移量(top、right、bottom、left)
以下文字和表格特点不需要特意去记,理解以后很好判断出实际的移动方向
设置某一方向的偏移量后,且值为正值时,当前元素相对于
该元素开启定位前,在文档流中所处的位置
,向此方向相反的方向移动正值的距离;如果值为负值,则向相同方向移动负值的绝对值的距离。例如:
偏移量 | 示例 | 含义 | 特点 |
---|---|---|---|
top | top:30px; | 该元素相对于原先的位置下移30px | 正值下移 |
top | top:-30px; | 该元素相对于原先的位置上移30px | 负值上移 |
right | right:30px; | 该元素相对于原先的位置左移30px | 正值左移 |
right | right:-30px; | 该元素相对于原先的位置右移30px | 负值右移 |
bottom | bottom:30px; | 该元素相对于原先的位置上移30px | 正值上移 |
bottom | bottom:-30px; | 该元素相对于原先的位置下移移30px | 负值下移 |
left | left:30px; | 该元素相对于原先的位置右移30px | 正值右移 |
left | left:-30px; | 该元素相对于原先的位置左移30px | 负值左移 |
2. 相对定位特点
开启定位后,还可以通过设置z-index属性来提高定位元素之间的层级(不限于相对定位,其它定位方式均可使用)
1.开启相对定位的元素,不设置偏移量时,元素不会产生任何变化
2.开启相对定位的元素,不会脱离文档流
3.开启相对定位的元素,会提高自身的层级
4.开启相对定位的元素,参照元素未开启定位时处于文档流中的位置,结合偏移量的值,进行定位
5.开启相对定位的元素,不会影响其本身是行内元素还是块级元素
未开启定位时,三个盒子布局如下图所示:
第二、三个盒子均开启相对定位,但未设置偏移量时:
特点1: 开启相对定位的元素,不设置偏移量时,布局不会产生任何变化
设置第二个盒子的偏移量时:
设置第三个盒子的偏移量时,三个盒子布局如下图所示:
特点2: 开启相对定位的元素,不会脱离文档流【2Lorem……内容仍处于原本的位置】
特点3: 开启相对定位的元素,会提高自身的层级【第二个盒子在第一个盒子之上】
特点4: 开启相对定位的元素,参照元素未开启定位时处于文档流中的位置,结合偏移量的值,进行定位
特点5: 开启相对定位的元素,不会影响其本身是行内元素还是块级元素:【第二个盒子原先所处的位置,仍然独占一行】
设置三个盒子的偏移量,同时设置层级后,效果如下图所示:
- 未开启定位偏移量不生效
- 未开启定位无法修改层级
- z-index设置的数字越大,越不容易被遮盖
由于第一个盒子的偏移量和层级未生效,则位置不改变;第二个盒子的层级更高,所以第二个盒子会遮盖第三个盒子。
相对定位练习代码,如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: #bfa;
/* 设置第一个盒子的偏移量,未开启定位偏移量不生效 */
top: 600px;
left: 600px;
/* 设置第一个盒子的层级,未开启定位无法修改层级*/
z-index: 3;
}
.box2 {
width: 200px;
height: 200px;
background: tomato;
/* 开启第二个盒子的相对定位 */
position: relative;
/* 设置第二个盒子的偏移量 */
top: -150px;
left: 50px;
/* 设置第二个盒子的层级 */
z-index: 2;
}
.box3 {
width: 200px;
height: 200px;
background: cornflowerblue;
/* 开启第三个盒子的相对定位 */
position: relative;
/* 设置第三个盒子的偏移量 */
top: -300px;
left: 100px;
/* 设置第三个盒子的层级 */
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">First</div>1Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, repellendus?
<div class="box2">Second</div>2Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, repellendus?
<div class="box3">Third</div>3Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, repellendus?
</body>
</html>
三、绝对定位(absolute)
1. 包含块
- 开启了定位且离当前元素最近的祖先元素(含父元素),称之为包含块
- 若祖先元素都未开启定位,则默认根元素为初始包含块(非html、body标签),初始包含块大小与视口大小相同
2. 绝对定位特点
- 1.开启绝对定位的元素,不设置偏移量时,位置不会产生任何变化,其它会变化
- 2.开启绝对定位的元素,会脱离文档流
- 3.开启绝对定位的元素,会提高自身的层级
- 4.开启绝对定位的元素,参照其包含块,结合偏移量的值,进行定位
- 5.开启绝对定位的元素,会改变元素的性质,行内元素变成块元素,块的宽度被内容撑开
未开启定位时,四个盒子布局如下图所示:
仅第三个和第四个盒子开启绝对定位,但未设置偏移量时,四个盒子布局如下图所示:
特点1: 开启绝对定位的元素,不设置偏移量时,位置不会产生任何变化,其它会变化
特点2: 开启绝对定位的元素,会脱离文档流【Four开头的文字上移】
仅第二个盒子开启绝对定位,且未设置偏移量时,四个盒子布局如下图所示:
特点2: 开启绝对定位的元素,会脱离文档流【盒子3和盒子4及Two开头的文字一同上移】
仅第二个盒子和第四个盒子开启绝对定位,且设置偏移量或设置层级相同时,四个盒子布局如下图所示:
特点3: 开启绝对定位的元素,会提高自身的层级
可知盒子2和盒子4点层级均提高或手动设置z-index相同时,代码靠后的元素的层级更高,会遮盖代码考前的元素
仅第二个盒子和第四个盒子开启绝对定位,且设置第四个盒子偏移量时,四个盒子布局如下图所示:
特点4: 开启绝对定位的元素,参照其包含块,结合偏移量的值,进行定位【由于盒子2不是盒子4的祖先元素,所以盒子4的包含块为初始包含块html】
关闭所有盒子的定位,为span标签开启绝对定位
特点5: 开启绝对定位的元素,会改变元素的性质,行内元素变成块元素,块的宽度被内容撑开【第三个span由行内元素变为块元素】
绝对定位练习代码,如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绝对定位</title>
<style>
.box1 {
width: 150px;
height: 150px;
background: #bfa;
}
.box2 {
width: 150px;
height: 150px;
background: plum;
/* 开启第二个盒子的绝对定位 */
/* position: absolute; */
/* 设置第二个盒子的层级 */
/* z-index: 2; */
}
.box3 {
width: 300px;
height: 300px;
background: tomato;
/* 开启第三个盒子的绝对定位 */
/* position: absolute; */
}
.box4 {
width: 150px;
height: 150px;
background: cornflowerblue;
/* 开启第四个盒子的绝对定位 */
/* position: absolute; */
/* 设置第四个盒子的层级 */
/* z-index: 2; */
/* 设置第四个盒子的偏移量 */
/* top: 0;
left: 0; */
}
span {
/* 开启span标签的绝对定位 */
position: absolute;
}
</style>
</head>
<body>
<div class="box1">1</div>
<span
>One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita,
dolore natus quos rem architecto veniam labore sapiente praesentium
nesciunt tempore, cumque, asperiores a magni quasi facere esse.
</span>
<div class="box2">2</div>
Two Odio,necessitatibus? Sapiente. deleniti adipisci consequuntur qui
<div class="box3">
3
<div class="box4">4</div>
<span
>Four adipisicing elit. Neque expedita perferendis non ad esse
repellendus ut provident cumque odio ullam doloremque quidem
necessitatibus, sapiente, corrupti harum architecto mollitia aspernatur
minus?</span
>
</div>
</body>
</html>
3. 水平方向布局
开启绝对定位的元素在其包含块中水平方向的位置,由以下9个属性值决定:
(1)left
(2)margin-left
(3)border-left
(4)padding-left
(5)width
(6)padding-right
(7)border-right
(8)margin-right
(9)right
必须满足:
\color{red}{必须满足:}
必须满足:开启绝对定位元素以上九种属性值之和 = 包含块元素内容区宽度
当九种属性值之和不满足等式时,称为过渡约束加粗样式,等式会自动调整。调整情况如下所示:
- 1. 当九个值没有 auto 时,浏览器会自动调整 right的值使等式成立
- 2. 当left和right设置为0时,width、margin-left、margin-right设置为auto时,浏览器会自动调整设置为auto的值使等式成立
- (1)当只有一个值设置为auto时: 仅调整auto值使等式成立
- (2)当width和某一外边距同时为auto时: auto的外边距设置为0,width自动调整为最大值
- (3)三个值均为auto时: width为最大值,两个外边距均为0
- (4)当width设置为固定值,其它两个外边距设置为auto时: 保证width不变,auto的外边距设置为相同的两个值
- 2. 当left、right设置为auto时,浏览器会优先调整left和right的值使等式成立
- (1)当只有left设置为auto时,margin无论是否设置auto: 仅调整left的值,将其设置为可调整的最大值使等式成立
- (2)当两个值均设置为auto时,margin无论是否设置auto: 仅调整right的值,将其设置为可调整的最大值使等式成立
由于情况过多,无法一一检验,建议实际开发中,通过手动调整,来保证布局效果
4. 垂直方向布局
开启绝对定位的元素在其包含块中垂直方向的位置,由以下9个属性值决定:
(1)top
(2)margin-top
(3)border-top
(4)padding-top
(5)height
(6)padding-bottom
(7)border-bottom
(8)margin-bottom
(9)bottom
必须满足:
\color{red}{必须满足:}
必须满足:开启绝对定位元素以上九种属性值之和 = 包含块元素内容区高度
可用以下样式来设置元素的水平和垂直方向均居中的样式:
width:固定px;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
四、固定定位(fixed)
1. 浏览器的视口
可用meta设置浏览器视口,meta标签 name设置为viewport
- width=device-width,将页面宽度设置为跟随设备的屏幕宽度
- initial-scale=1.0,设置初始缩放级别
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 固定定位特点
固定定位除了参照的不是包含块,而是浏览器的视口进行定位,其余都和绝对定位一致
- 1.开启固定定位的元素,不设置偏移量时,位置不会产生任何变化,其它会变化
- 2.开启固定定位的元素,会脱离文档流
- 3.开启固定定位的元素,会提高自身的层级
- 4.开启固定定位的元素,会改变元素的性质,行内元素变成块元素,块的宽度被内容撑开
以下是其与绝对定位不同的特点:
- 5.开启固定定位的元素,参照浏览器视口,结合偏移量的值,进行定位
- 6.开启固定定位的元素,不会随浏览器的滚动条而滚动
开启导航栏的绝对定位,此时位于浏览器顶部,效果如下图所示:
开启导航栏的绝对定位,此时位于浏览器底部,效果如下图所示:
特点5: 开启固定定位的元素,参照浏览器视口,结合偏移量的值,进行定位
特点6: 开启固定定位的元素,不会随浏览器的滚动条而滚动
绝对定位练习代码,如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
可用meta设置浏览器视口,meta标签 name设置为viewport
- width=device-width,将页面宽度设置为跟随设备的屏幕宽度
- initial-scale=1.0,设置初始错放级别
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
/* 去除浏览器样式 */
* {
margin: 0;
padding: 0;
}
/* 设置导航栏 */
.nav {
/* 设置宽度和高度 */
width: 1210px;
height: 48px;
/* 设置导航栏背景色 */
background-color: #E8E7E3;
/* 设置导航栏为固定定位 */
position: fixed;
/*
设置导航栏水平居中
- 由于是固定定位,除了margin,还要设置偏移量才可以保证居中
- 否则right会变成最大值,不能保证居中
*/
margin: auto;
left: 0;
right: 0;
top: 50px;
bottom: auto;
}
.nav li {
float: left;
list-style-type: none;
height: 48px;
}
.nav li a {
/* 设置超链接字体大小、颜色 */
font-size: 18px;
color: #8C8C8B;
/* 去除超链接下划线 */
text-decoration: none;
/* 当line-height和height高度一致时,可以使文本垂居中 */
line-height: 48px;
/* display: inline-block时采用如下方式 */
/* padding: 0 37px */
/* float:left时采用如下方式 */
padding: 0 39px;
}
.nav li:hover {
color: #D4D3D0;
background-color: #3F3F3F;
}
/* 以下方式也可以不带a,但是与此同时上面的内边距也不能设置在超链接内部,设置的值也不同 */
.nav li:last-child a {
/* display: inline-block时采用如下方式 */
/*padding: 0 40px 0 40px;*/
/* float:left时采用如下方式 */
padding: 0 41px 0 42px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, culpa! Reiciendis eum est asperiores unde animi at autem accusantium tempora quos. Hic asperiores, corrupti laborum minus recusandae soluta accusantium ex?
</div>
<div>Quia velit perspiciatis accusantium neque iure saepe unde optio, aut maiores cupiditate facilis molestiae eos fugit fuga quidem natus reprehenderit temporibus voluptate illo, voluptatem incidunt! Quo mollitia facere eligendi unde!</div>
<div>Fuga incidunt nisi enim quisquam vel expedita deleniti voluptates architecto amet nobis, ipsam consectetur accusantium rem officia. Laborum explicabo ut quam alias, libero perspiciatis architecto fugiat dolorem beatae qui excepturi.</div>
<div>Eius explicabo veritatis praesentium similique possimus molestias nemo minima, tenetur ducimus alias porro molestiae, nam omnis. Earum quos quod molestiae consectetur atque neque a, error ea nesciunt quibusdam praesentium cum.</div>
<div>Obcaecati omnis nesciunt, dicta voluptas neque odit, quos iusto quis esse aliquid dolor numquam ducimus vitae molestiae quibusdam fugiat ad vel rerum in, aspernatur possimus eius! Architecto tenetur ex fugiat.</div>
<div>Error accusamus hic praesentium quasi excepturi perspiciatis voluptatum numquam est rem repudiandae neque laudantium dolores necessitatibus, assumenda labore saepe veniam amet. Eum dignissimos iste blanditiis vitae fugiat voluptatibus culpa error!</div>
<div>Quam labore tempora minus tenetur. Porro asperiores, consequuntur repellat molestiae pariatur sapiente facere. Voluptas vero eius doloremque minima blanditiis. Vitae, officia dolorum corrupti doloribus voluptate ad incidunt illo neque quod?</div>
<div>Nesciunt sint quae et excepturi a perferendis deleniti molestiae amet ex, cum maxime, sunt ut similique officiis at nobis aperiam saepe tenetur itaque sit. Necessitatibus ullam earum laudantium quos deleniti!</div>
<div>Laboriosam reprehenderit error blanditiis illum perferendis. Ipsa, provident facere. Dignissimos impedit alias quos aliquam inventore, numquam officia, voluptatem quibusdam ea porro eligendi non est amet, incidunt error maiores. Aliquam, praesentium.</div>
<div>Repellat, cupiditate distinctio! Accusantium perferendis, praesentium, expedita, optio at architecto excepturi odio a dolores minus quis veritatis numquam! Corrupti soluta deserunt voluptatibus explicabo molestias natus nostrum illum praesentium necessitatibus
amet.
</div>
<div>Deleniti incidunt neque eum voluptates aperiam? Laborum dolore illo mollitia ut. Nam, iste quo velit veritatis soluta aliquam quos enim. Quidem nemo praesentium voluptate quo, pariatur sequi nihil blanditiis aliquam.</div>
<div>Aperiam asperiores maxime eaque sit blanditiis totam quis facere fuga perspiciatis, tempore, ex sunt nostrum non placeat magnam nulla ut doloremque, tempora debitis! Delectus voluptas, autem magni mollitia ipsa sint.
</div>
<div>Fugit consequatur fuga ipsam voluptate blanditiis voluptas, beatae repellendus, illum dolorem cumque cupiditate deserunt tempore quia molestias repudiandae possimus provident deleniti nam ducimus consectetur maiores quisquam praesentium dolore ullam?
Omnis!
</div>
<div>Maxime inventore iste hic id ea magni eaque aliquid, reiciendis adipisci qui nam odio velit voluptates neque dolores molestiae perferendis aspernatur, itaque assumenda. Modi voluptatem quas ab corrupti expedita accusantium!
</div>
<div>Placeat fugiat quam provident nulla? Ipsa porro quod totam vero tenetur nisi harum rem facere minima doloremque. Obcaecati corrupti voluptatem, quam laudantium modi atque dolore molestias, enim, ducimus assumenda itaque!
</div>
<div>Inventore pariatur ab architecto provident fugit voluptatem, nihil sunt soluta non nam deleniti quidem doloremque praesentium asperiores debitis. Corporis optio officia labore, sed nemo molestiae! Ea eius modi quidem sunt.</div>
<div>Minima expedita voluptates dolor odio ullam? Aut voluptatem fugiat molestiae, sed veniam tempore porro ex, voluptas unde minima eaque voluptatum hic eligendi beatae, commodi iure laudantium. Illo nam commodi nostrum!
</div>
<div>Nisi odit distinctio porro deserunt! Eum repellendus debitis aut doloremque beatae illo animi! Debitis enim ad neque ipsam veniam incidunt fugit eligendi facilis corporis velit, deleniti esse error quae cum?</div>
<div>Fugit ullam autem enim? Quidem, quis a. Sequi delectus doloribus perspiciatis nesciunt quidem. Obcaecati nemo omnis minus quaerat doloremque veritatis, alias inventore quae! Nesciunt, laudantium ab doloremque ipsam facere recusandae!
</div>
<div>Assumenda unde ratione inventore nesciunt atque, sed animi voluptatum repellat, deleniti vel dolorem recusandae quis commodi eos rem culpa labore doloremque earum molestias! Molestiae deleniti incidunt, quos totam reprehenderit earum?</div>
</body>
</html>
五、粘滞定位(sticky)
1. 粘滞定位特点
可滚动元素指 display:sccoll
粘滞定位与相对定位特点类似
- 1.开启粘滞定位的元素,不设置偏移量时,元素不会产生任何变化
- 2.开启粘滞定位的元素,不会脱离文档流
- 3.开启粘滞定位的元素,会提高自身的层级
- 4.开启粘滞定位的元素,参照元素未开启定位时处于文档流中的位置,结合偏移量的值,进行定位
- 5.开启粘滞定位的元素,不会影响其本身是行内元素还是块级元素
以下是其与相对定位不同的特点:
- 6.开启粘滞定位的元素,可以在元素到达某个固定位置时,将其固定
开启导航栏的粘滞定位,此时位于浏览器顶部,效果如下图所示:
开启导航栏的粘滞定位,此时位于浏览器底部,效果如下图所示:
特点6: 开启粘滞定位的元素,可以在元素到达某个固定位置时,将其固定
六、练习代码
1. 轮播图
此代码效果和京东网站实际轮播图仍有差距,无法在悬停时,更改每个圆点之间的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 此效果和京东网站实际轮播图仍有差距 -->
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
.img-list {
width: 590px;
height: 470px;
/* 设置图片容器水平居中 */
margin: 50px auto;
/* 常用手段,父相(对定位)子绝(对定位) */
/* 这里使用相对定位,可以通过不设置偏移量保证img-list区域仅开启定位,但是位置无变化 */
position: relative;
}
.img-list img {
width: 590px;
height: 470px;
/* 开启图片绝对定位,使其脱离文档流,重叠在一起 */
position: absolute;
}
.pointer {
/* !给圆点区域开启绝对定位 */
position: absolute;
/* 保证圆点出现在所有图片上方 */
z-index: 10;
/* 设置偏移量,通过父相子绝,保证圆点在img-list中定位 */
bottom: 20px;
left: 30px;
}
.pointer a {
width: 10px;
height: 10px;
/* 设置外边距 */
margin: 0 4px;
/* 设置背景颜色 */
background-color: rgba(255, 255, 255, .3);
/* 设置圆形区域 */
border-radius: 50%;
/* 设置所有链接水平排列,使用float也会使其脱离文档流 */
float: left;
/* 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面 */
background-clip: content-box;
/* 为保证所有原点下方可以对其,为未悬停的原点设置透明边框 */
border: 2px transparent solid;
}
/* 设置超链接悬停样式 */
.pointer a:hover {
background-color: white;
/* 设置轮廓 */
border: 2px rgba(168, 163, 163, 0.4) solid;
}
</style>
</head>
<body>
<div class="img-list">
<img src="../imgs/exercise5/1.jpg" alt="">
<img src="../imgs/exercise5/2.jpg" alt="">
<img src="../imgs/exercise5/3.jpg" alt="">
<img src="../imgs/exercise5/4.jpg" alt="">
<img src="../imgs/exercise5/5.jpg" alt="">
<img src="../imgs/exercise5/6.jpg" alt="">
<img src="../imgs/exercise5/7.jpg" alt="">
<img src="../imgs/exercise5/8.jpg" alt="">
<div class="pointer">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
练习代码效果如下图所示:
结尾
如有错误,欢迎评论区指正。
更多其它知识可查询在线文档:[w3school在线教程链接](https://www.w3school.com.cn/)