文章目录
目录
前言
前言
大家好，我是ice三分颜色。
个人主页：ice三分颜色的博客
本文讲了C1认证的web基础相关的知识以及习题，篇幅很长，建议收藏。
走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流，努力什么时候开始都不算晚，那不如就从这篇文章开始！
大家一起成长呀！笔芯
Web基础
十四、语义化标签
知识点
| 元素 |
说明 |
| article |
定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等 |
| aside |
一般用于网页中的侧边栏或者文章内部的标注框 |
| header |
页面的头部区域，通常包括网站logo、链接导航、搜索框、banner |
| nav |
页面的导航链接区域 |
| main |
定义文档主要内容 |
| section |
定义文档的区域 |
| footer |
文档的页脚 |
| mark |
标记、突出显示文本 |
| ul |
无序列表 |
| form |
创建HTML表单 |
| button |
定义按钮 |
| i |
用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体 |
习题
语义化标签-01
现需要设置一个按钮，请填写语义化标签补全代码片段（仅填写一个标签名即可）
<_____>点我!</_____>
A. input
B . button
c. a
D. div
题解：input是html中规定用户可以在其中输入数据的输入字段，<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。Input可以设置提交按钮，但要通过type属性。
在 <button> 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
a是超链接，用属性href指定连接的目标
div是块级元素
答案B
语义化标签-02
在HTML中一般用哪个语义化标签表示斜体文本效果
A. i
B. p
C. span
D. h4
题解：i斜体
P段落标签
span行内标签
h4标题标签
答案A
语义化标签-03
在HTML中一般用哪个语义化标签表示头部导航
A. a
B . header
c. link
D. nav
题解
nav是页面导航的链接区域，写在body标签内，做页面的头部导航部分
header是页面的头部区域，<header> 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
link是定义文档与外部资源的关系，最常见的用途是链接样式表。存在于head部分可出现任何次数
a是超链接，用属性href指定连接的目标
答案D
语义化标签-04
在HTML中一般用哪个语义化标签定义无序列表<______>?
A. div
B. ul
c. ol
D. section
题解：div块级元素，ul无序列表，ol有序列表，section定义文档的区域（<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。）
答案B
语义化标签-05
在HTML中一般用哪个语义话标签定义表单<_______>?
A. aside
B. main
c. form
D. section
题解： <aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容关。
<main> 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。注释：在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。<form>表单。section定义文档的区域
答案C
十五、表单标签
知识点
<form></form>标签
用于创建HTML表单，常用属性如下：
action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post
<input />元素
<input />元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的
类型
描述
text
普通文本框，一般默认20个字符宽度
textarea
多行文本框
button
普通按钮
radio
单选框
checkbox
多选框
表单重置按钮
submit
表单提交按钮
password
密码输入框，密码字段使用圆点或星号代替
<label></label>标签
用于为input标签提供标注，点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上，label标签的for属性值应当与相关元素的id属性值相同。
<select></select>标签
用于创建下拉列表
select元素中的<option></option>标签用于定义列表的可选项
<button></button>元素
用于定义普通按钮
习题
表单标签-01
现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字，请补全下方代码片段
<form action="/example/html5/demo_form.asp">
密号：<input type="text" name="country_code" pattern="[0-9]{3}" ________="请输入三位数字" />
<input type="submit" />
</form>
题解：pattern属性规定用于验证输入字段的正则。
title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。input元素使用title属性可以在输入内容不符合该正则时，给出提示语判断输入是否正确的提示语句只在表单提交时显示
答案：title
表单标签-02
现表单内有个提交按钮，点击后自动提交表单请求，请补全代码片段
<input type="________" value="提交">
题解：input中属性type表单提交按钮是submit，表单重置按钮是reset。普通按钮是button。
答案：submit
表单标签-03
怎么用input标签创建一个表单重置按钮？请补齐这段代码
<input type="________" value="重置">
答案：reset
表单标签-04
怎么用input标签创建一个密码输入框？请补齐这段代码
<input type="________" placeholder="请输入密码">
题解：placeholder 属性规定可描述输入字段预期值的简短的提示信息，placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
答案：password
表单标签-05
现有以下HTML代码，需要在点击提交按钮时，将用户名和密码自动提交到https://ac-api.csdn.net/login，请补全代码片段
<form _______="https://ac-api.csdn.net/login" method="get">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="提交">
</form>
题解：form 的属性action，属性值是URL，规定当提交表单时向何处发送表单数据。向url的网址发送表单数据。
答案：action
十六、转义字符
知识点
在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。
| 显示 |
实体名称 |
实体编号 |
说明 |
| 空格 |
|
  |
半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致 |
| 空格 |
  |
  |
半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致 |
| 空格 |
  |
  |
全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致 |
| < |
< |
< |
小于号 |
| > |
> |
> |
大于号 |
| & |
& |
& |
&符号 |
| " |
" |
" |
双引号 |
| ' |
------ |
' |
单引号 |
| © |
© |
© |
版权符号 |
| ™ |
™ |
™ 或 ™ |
商标符号 |
| ® |
® |
® |
注册商标符号 |
| $ |
------ |
$ |
美元符号 |
| ¥ |
¥ |
¥ |
人民币符号 |
| × |
× |
× |
乘号 |
| ÷ |
&divi de; |
÷ |
除号 |
习题
转义字符-01
在HTML源代码中用什么实体名称表示版权符号 ©？
答案：©
转义字符-02
在HTML源代码中用什么实体名称表示商标符号 ™
答案：™
转义字符-03
在HTML源代码中用什么实体名称表示注册商标符号 ®
答案：®
转义字符-04
在HTML源代码中用什么实体名称表示大于号>
答案：>
转义字符-05
在HTML源代码中用什么实体名称表示乘号x
答案：×
十七、Head头
知识点
head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>
<title></title>用于定义文档的标题，该标题会出现在浏览器窗口的标题栏或状态栏上，把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称
<link />用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标。<link />是空元素，仅包含属性，只在<head>标签内。
| 属性 |
属性值 |
描述 |
| href |
URL |
设置目标链接的文件路径 |
| rel |
stylesheet、icon、sidebar、prev等 |
规定当前文档与链接文档之间的关系 |
| type |
MIME_type |
目标连接文档的MIME类型 |
<style></style>用于给文档引入CSS样式信息，将样式表包含在style开始与结束标之间。
<script></script>用于给页面添加js脚本，可以直接在script开始和结束标签之间包含JavaScript脚本。也可以通过script的src属性链接外部脚本文件。
<meta />提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性。值作为元数据的名称，content作为元数据的值。keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一
| 名称 |
值 |
描述 |
|
| keywords |
关键字 |
描述网页关键字，使用逗号分隔 |
|
| description |
描述内容 |
网站主要内容的简短描述 |
|
| author |
作者 |
描述网站作者 |
|
| viewport |
width |
viewport视口宽度，设置为device-width表示为设备的宽度 |
定义viewport的初始大小，仅用于移动设备 |
| height |
viewport视口高度 |
||
| maximum-scale |
最大缩放比例 |
||
| initial-scale |
初始缩放比例 |
||
| minimum-scale |
最小缩放比例 |
||
| user-scalable |
是否允许用户缩放 |
||
charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等
http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：content-type：规定文档的字符编码，等同于charset属性设置字符编码
default-style：设置默认CSS样式表组的名称
refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）
<base />用于为页面中的所有相对链接设置默认URL或默认target属性。
target="_blank" 在浏览器新窗口打开文档。
习题
Head头-01
现需要在html文件中引入JS脚本文件，补全代码
<script _____="./index.js"><script>
答案：src
Head头-02
head中一般使用哪个标签引入外部的CSS样式表文件？
<_____ rel="stylesheet" href="style.css" type="text/css" />
答案：link
Head头-03
现有以下代码片段，要求实现定义SEO的关键字， 请补全代码片段
<meta name="_______" content="CSDN，CSDN能力认证中心"/>
答案：keywords
Head头-04
在移动端设备中想要定义视口宽度为屏幕宽度，请补全代码片段
<head>
<meta name="viewport" content="width=________, initial-scale=1.0">
</head>
答案：device-width
Head头-05
需定义文档的字符编码为utf-8，请补全代码片段
<head>
<meta _______="UTF-8">
</head>
答案：charset
十八、CSS引入方式
知识点
行内样式
直接使用HTML元素的style属性引入CSS样式
例：<p style=＂font-size: 16px; color: #333;＂>软件工程师能力认证</p>
内嵌样式
使用<style></style>标签引入样式
例
<style>
p {
color: #333;
font-size: 16px;
}
</style>
外部样式
链接样式（最常用）
在<head></head>标签中，使用<link />标签链接外部的CSS文件
link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css
例：<link rel="stylesheet" href="style.css" type="text/css" />
导入样式
使用@import url()引入CSS文件
在CSS文件中直接使用@import url()
在HTML文件中需要在<style></style>标签中使用@import url()
在HTML初始化时，@import url()导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分
// 在HTML文件中导入
<style>
@import url(style.css);
</style>
// 在CSS文件中导入
@import url(style.css);
习题
CSS引入方式-01
现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link rel="________" href="style.css" />
</head>
答案:stylesheet
CSS引入方式-02
现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" ______="style.css" />
</head>
答案:href
CSS引入方式-03
现有以下代码片段，需要在行内引入CSS样式，补全代码片段
<p _______="color: #333; font-size: 16px;">CSDN能力认证中心</p>
答案:style
CSS引入方式-04
现需要在index.css中引入文件style.css，补全代码片段
/* index.css */
________ url('style.css')
p {
font-size: 16px;
}
/* style.css */
p {
color: red;
}
答案:@import
CSS引入方式-05
现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link type="_______" rel="stylesheet" href="style.css" />
</head>
答案:text/css
十九、CSS背景
知识点
| 属性 |
属性值 |
说明 |
| background-color |
颜色值，如rgb，rgba，十六进制表示等，设置为transparent表示背景透明 |
设置背景颜色 |
| background-image |
url( filepath ) 或 none |
设置背景图像 |
| background-size |
宽高、百分比宽高、contain、cover |
设置背景图片尺寸 |
| background-repeat |
repeat/ repeat-x/ repeat-y |
设置背景图片重复方式 |
| background-position |
top left/ top center/ center等 |
设置背景图片的位置 |
background-size属性
contain：保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示，有可能出现图片无法完全覆盖背景区域
cover：保持图片纵横比不变，最大程度覆盖背景区域，有可能导致背景图片部分区域无法显示
background-repeat属性
repeat（默认）：允许水平和垂直方向重复（平铺）背景图片
repeat-x：只允许水平方向重复（平铺）背景图片
repeat-y：只允许垂直方向重复（平铺）背景图片
background属性
简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表
background: #ff0000 url('smiley.gif') no-repeat cover;
习题
CSS背景属性-01
现需要设置div的背景图高宽为50px，请补全代码片段
<style>
div {
width: 100px;
height: 100px;
background-image: url('./bg.png');
________: 50px 50px;
}
</style>
<div></div>
答案：background-size
CSS背景属性-02
现需要设置div的背景图片，请补全代码片段
<style>
div {
background-image: ___________('./bg.png');
height: 100px;
width: 100px;
}
</style>
<div></div>
答案：url
CSS背景属性-03
div需要横向平铺背景图片001.png，请补全代码片段
div {
background: url(images/001.png) ________ left top;
}
题解：repeat-x是横向平铺方式，后面的left top是背景图片的位置，直接用background可罗列color、image、size、repeat、position属性的属性值，空格隔开即可。
答案：repeat-x
CSS背景属性-04
div需要设置背景图001.png的位置从左上角开始，请补全代码片段
div {
height: 100px;
width: 100px;
background-image: url('./bg.png');
___________: top left;
}
答案：background-position
CSS背景属性-05
现需要设置div的背景图，使背景图保持纵横比不变，最大程度覆盖背景区域，请补全代码片段
<style>
div {
width: 100px;
height: 100px;
background-image: url('./bg.png');
background-size: ______;
}
</style>
<div></div>
答案：cover
二十、CSS文本属性
知识点
color属性
用于设置文本的颜色，可设置的值有：颜色名，如【red】、十六进制值，如【#FFFFFF】、RGB值，如【rgb(255, 0, 0)】、rgba值，如【rgba(255, 0, 0, 0.9)】
font-size属性
用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等。字体大小未设置时默认字体大小为16px
font-weight属性
用于设置文本的粗细，可设置的值有：
| 属性值 |
说明 |
| normal |
标准字符（默认） |
| bold |
粗体字符 |
| bolder |
更粗的字符 |
| lighter |
更细的字符 |
| 100、200、300、400、500、 |
400相当于normal |
font-family属性
用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推。font-family："Times New Roman", "Georgia", "Serif";
text-align属性
用于设置文本的水平对齐方式，可设置的值有：
center（居中对齐）
left（左对齐）
right（右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐
line-height属性
用于设置行间距，可设置的值如下
数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如20px
百分比：行间距为当前字体大小乘百分比
text-indent属性
用于指定首行缩进值，可设置的值如下
固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比
letter-spacing属性
用于设置字间距，设置固定值为字间距，如10px
word-spacing属性
用于指定文本中单词之间的间距，设置固定值为单词间距，如10px。
text-decoration用于设置文本的装饰线，是下表属性的简写
| 属性 |
属性值 |
描述 |
|
| text-decoration-line |
none |
无线条 |
设置要使用哪种文本装饰的类型（下划线、上划线、删除线）。 |
| underline |
下划线 |
||
| overline |
上划线 |
||
| line-through |
删除线 |
||
| text-decoration-color |
颜色名、十六进制颜色、rgb等 |
设置装饰线颜色 |
|
| text-decoration-style |
solid |
实线 |
设置装饰线的样式 |
| double |
双实线 |
||
| dotted |
点划线 |
||
| dashed |
虚线 |
||
| wavy |
波浪线 |
||
例：text-decoration: underline wavy red; /* 表示为红色波浪形下划线 */
text-transform属性
用于设置文本大小写字母，常用属性如下
uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母
writing-mode属性
设置文本在水平或垂直方向的排布方式
horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向
sideways-lr：文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）
sideways-rl：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）
vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致
white-space属性
用于设置文本的空白符处理方式，属性值如下
属性值
描述
normal
合并空格，换行符转化为一个空格，允许自动换行
nowrap
合并空格，换行符转化为一个空格，不允许自动换行
pre
保留空格，保留换行符，不允许自动换行
pre-line
合并空格，保留换行符，允许自动换行
pre-wrap
保留空格，保留换行符，允许自动换行
break-spaces
保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间
习题
CSS文本属性-01
现需要实现英文小写转大写，请补全代码片段
<p style="________: uppercase">hello world</p>
答案：text-transform
CSS文本属性-02
现需要实现古代书写从上到下，从右至左的效果（如图所示），请补全代码片段
<p style="________: vertical-rl; height: 100px;">两个黄鹂鸣翠柳，一行白鹭上青天</p>
答案：writing-mode
CSS文本属性-03
现需要使文本不换行，且保留文本当中的四个空格，请补全代码片段
<style>
p {
width: 50px;
white-space: _________;
}
</style>
<body>
<p>CSDN能力认证 专业IT能力认证</p>
</body>
答案：pre
CSS文本属性-04
现需要给文本内容「CSDN能力认证」增加下划线，请补全代码片段
<style>
p {
_________: 1px solid underline;
}
</style>
<p>CSDN能力认证</p>
题解：因为有属性样式，
答案：text-decoration
CSS文本属性-05
现需要将p元素的行高设置为24px，请补全代码片段
<style>
p {
_________: 24px;
}
</style>
<p>CSDN能力认证</p>
答案：line-height
二十一、基础选择器
知识点
| 选择器类型 |
描述 |
示例 |
| 通配选择器 |
通配选择器使用一个星号*表示，*会匹配所有元素 |
* {
|
| 标签选择器 |
通过标签名匹配，匹配文档中所有为此标签名的元素 |
p {
|
| id选择器 |
通过井号#来定义id选择器，根据元素的id属性匹配（精确匹配）元素 |
#box {
|
| 类选择器 |
通过点.来定义类选择器，根据元素的class属性匹配（精确匹配）元素 |
.container {
|
| 组合选择器 |
包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器 |
#box>.nav p {
|
通配选择器
可以与其他选择器相结合，选择某元素下的所有元素
/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
.box * { color: #000; }
由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式
* {
margin: 0;
padding: 0;
border: 0;
}
标签选择器
标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等
id选择器
id属性的属性值应当是当前文档唯一
类选择器
class属性值在文档中可以重复
组合选择器
通过间隔符将基础选择器连接起来，实现组合选择的效果
| 选择器 |
间隔符 |
描述 |
| 后代选择器 |
空格 |
选取该元素的后代元素 |
| 子代选择器 |
> 大于号 |
选择该元素的第一级子元素 |
| 相邻选择器 |
+ 加号 |
选择该元素之后相邻第一个元素，且两者具有相同的父元素 |
| 兄弟选择器 |
~ 波浪号 |
选择该元素之后的同层级元素 |
例：有以下代码，选择所有类名为title的元素后的第一个<p>元素，将其字体颜色改为红色，如下图所示，可使用相邻选择器选择元素设置样式
// 示例代码
<style>
.title + p {
color: red;
}
</style>
<body>
<p class="title">CSDN能力认证中心</p>
<p>C1见习能力认证</p>
<span>C4专项能力认证</span>
<p>C5全栈能力认证</p>
</body>
习题
基础选择器-01
想要选择ol元素的子代li元素，并设置字体和字体颜色样式，请补齐这段代码
<style>
________{
color: #000000;
font-family: 'Microsoft YaHei';
}
</style>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
题解：用子代选择器
答案：ol>li
基础选择器-02
现有以下代码，要求使用类选择器选择内容为CSDN能力认证中心的p元素，并为其设置样式，补全代码片段
<style>
______ {
color: #333;
font-size: 16px;
}
</style>
<p class="title">CSDN能力认证中心</p>
答案：.title
基础选择器-03
现有以下代码片段，要求使用id选择器选择内容为CSDN能力认证中心的span元素，补全代码片段
<style>
______ {
color: #333;
font-size: 16px;
}
</style>
<span id="title">CSDN能力认证中心</span>
答案：#title
基础选择器-04
现需要重置浏览器样式，将全部元素的border/padding/margin都设置为0，请补全代码片段
___ {
border: 0;
padding: 0;
margin: 0;
}
题解：在CSS选择器中，使用通配选择器能够选中页面当中的所有元素，并给这些元素设置样式
答案：*
基础选择器-05
现有以下代码，需要将「CSDN能力认证中心」之后的所有p元素字体颜色设置为红色
<style>
.title___p {
color: red;
}
</style>
<div>
<p class="title">CSDN能力认证中心</p>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>C5全栈能力认证</p>
</div>
题解：用兄弟选择器能够选中该元素之后的所有同级元素，并给这些元素设置样式
答案：~
二十二、伪类选择器
知识点
常见的伪类
伪类
描述
:hover
用于设置鼠标悬停在元素上方时的样式
:focus
用于设置元素获得焦点时的样式
:active
用于设置元素被激活时（按下按键时、松开按键时）的样式
:link
用于设置元素点击之前的样式（仅可用于a标签）
:visited
用于设置被访问的元素的样式（仅可用于a标签）
:first-child
用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
:first-of-type
用于选取属于其父元素的第一个特定类型的子元素
:last-child
用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
:last-of-type
用于选取属于其父元素的最后一个特定类型的子元素
:nth-child(N)
选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，N可以为数字、关键字（odd / even）、公式（如：2n+1）
:nth-of-type(N)
选择匹配属于其父元素的第N个指定类型的子元素，N可以为数字、关键字（odd / even）、公式
:nth-last-child(N)
选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式
:nth-last-of-type(N)
选择匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，N可以为数字、关键字（odd / even）、公式
例：有以下代码，判断最终的样式效果
<style>
p:first-child {
color: red;
}
</style>
<div>
<span>CSDN能力认证中心</span>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>C5全栈能力认证</p>
</div>
你是否认为最终效果是C1见习能力认证字体为红色？实际上所有内容字体都不会变红色
对于选择器p:first-child，需要同时满足两个要求：
该元素为p元素
该元素为该元素父级元素的第一个子元素
对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分
习题
伪类选择器-01
将最后一栏背景设置为灰色，补全横线处数字
<style>
.item:nth-last-of-type(________) {
background-color: gray;
}
</style>
<ul class="list">
<li class="item">2</li>
<li class="item">3</li>
<li class="item">5</li>
<li class="item">6</li>
</ul>
题解：:nth-last-of-type(n)匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，:nth-last-of-type(1)则可选取属于其父元素的最后一个li元素
答案：1
伪类选择器-02
划去内容不是质数的<li></li>，补全横线处数字
<style>
.item:nth-last-child(________) {
text-decoration: line-through;
}
</style>
<ul class="list">
<li class="item">2</li>
<li class="item">3</li>
<li class="item">5</li>
<li class="item">8</li>
</ul>
答案：1
伪类选择器-03
要实现当鼠标悬停到a标签时移除下划线，请补齐选择器
a:________{
text-decoration: none;
}
答案：hover
伪类选择器-04
需要将文本「C1见习能力认证」的字体颜色设置为红色，请补齐选择器
<style>
p:nth-of-type(_____) {
color: red;
}
</style>
<div>
<h1>CSDN能力认证中心</h1>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>C5全栈能力认证</p>
</div>
答案：1
伪类选择器-05
需要将所有内容为「CSDN」的文本的字体颜色设置为红色，请补齐选代码
<style>
p:________(3n) {
color: red;
}
</style>
<div>
<h1>CSDN能力认证</h1>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>CSDN</p>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>CSDN</p>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>CSDN</p>
</div>
题解：两者的区别，nth-of-type他是当前元素的兄弟元素的第n个（也就是说四个相同标签的，一个不同标签插在其中，取的相同标签中的第n个），而nth-child是当前元素的兄弟节点的第n个当前元素（也就是说四个相同标签的，一个不同标签插在其中，取的五个标签中的第n个）。
答案：nth-of-type
二十三、伪元素选择器
知识点
一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符
| 伪元素 |
描述 |
示例 |
| ::after |
用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素 |
p::after {
|
| ::before |
用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素 |
p::before {
|
| ::first-line |
向文本的首行添加样式，只能应用于块级元素 |
p::first-line {
|
| ::first-letter |
向文本的首字母添加样式，只能应用于块级元素 |
p::first-letter {
|
| ::marker |
用于改变li元素的数字或符号的样式，只能作用于display属性值为list-item的元素 |
ul li::marker {
|
| ::placeholder |
用于设置表单元素占位符文本的样式 |
input::placeholder {
|
例：将li元素内容前的符号设置为‘星号’
代码示例
<style>
ul li::marker {
content: '★';
}
</style>
<ul>
<li>C1 见习工程师能力认证</li>
<li>C4 专项工程师能力认证</li>
<li>C5 全栈工程师能力认证</li>
</ul>
习题
伪元素选择器-01
现需要实现首行文本为红色，请补全代码片段
<style>
p::_______{color: red;}
</style>
<p>CSDN软件工程师能力认证对标名企技术标准<br/>校招/转岗/加薪必备。</p>
答案：first-line
伪元素选择器-02
现需要实现在文字结尾添加一张图片，请补全代码片段
<style>
p::_______ {content: url('./bg.png');}
</style>
<p>CSDN软件工程师能力认证</p>
题解：是在元素内容之后插内容，所以用::after
答案：after
伪元素选择器-03
现需要实现给文本请输入用户名设置样式，请补全代码片段
<style>
input::_______ {content: url('./bg.png');}
</style>
<input type="text" placeholder="请输入用户名">
题解：用了input，所以是用于表单元素，所以用::placeholder
答案：placeholder
伪元素选择器-04
现需要将li元素前的项目符号修改为*，请补全代码片段
<style>
ul li::____ {
content: '*';
}
</style>
<ul>
<li>C1 见习工程师能力认证</li>
<li>C4 专项工程师能力认证</li>
<li>C5 全栈工程师能力认证</li>
</ul>
答案:marker
伪元素选择器-05
现需要实现在文字内容之前添加符号>，请补全代码片段
<style>
p::_______ {content: '>';}
</style>
<p>CSDN软件工程师能力认证</p>
答案:before
二十四、CSS优先级
知识点
CSS优先级
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】
注：1.通配符选择器【*】和关系选择符【+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等】对优先级没有影响
2.在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
| 选择器 |
权重 |
| 内联样式 |
1000 |
| ID选择器 |
100 |
| 类选择器、属性选择器、伪类选择器 |
10 |
| 标签选择器、伪元素选择器 |
1 |
| 相邻选择符、子代选择符、兄弟选择符、后代选择符 |
0 |
选择器权重计算
选择器的权重可以相加：#header .nav li { list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性。权重不同时，权重大的选择器生效
!important规则
当你在一个样式声明中使用!important规则时，这个样式将覆盖其他的任何声明
!important规则与优先级无关，但是会直接影响样式的最终显示结果
习题
CSS优先级-01
现有如下代码片段，hello world的最终显示颜色为color: ________
<style>
#son.bt p {color: #111999;}
#father>div p {color: #333444;}
</style>
<div id="father">
<div id="son" class="bt">
<p>hello world</p>
</div>
</div>
题解：没有内联样式，看子元素的id选择器，没有再看类选择器，再看其他
答案：#111999
CSS优先级-02
现有如下代码片段，hello world的最终显示颜色为color: ________
<style>
.text1 {color: #999998 !important;}
#son {color: #00ff00;}
</style>
<p id="son" class="text1" style="color: #ff0000;">hello world</p>
题解：!important，作用是提高指定样式规则的应用优先权（优先级）。
答案：#999998
CSS优先级-03
现有如下代码片段，hello world的最终显示颜色为color: ________
<style>
.text1:nth-of-type(1) {
color: #999998
}
#son {
color: #00ff00;
}
</style>
<p id="son" class="text1">hello world</p>
题解：权重相加的话，类选择器加上兄弟选择符，一定大于子代选择符
答案：#00ff00
CSS优先级-05
现有以下代码，文本「C1见习能力认证」的字体颜色最终显示为_____?
<style>
.title ~ p {
color: #ff0000;
}
div.box > p {
color: #00ff00;
}
</style>
<div class="box">
<p class="title">CSDN能力认证中心</p>
<p>C1见习能力认证</p>
</div>
题解：权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性。
答案：#00ff00
二十五、块级元素和行内元素
知识点
块级元素
在浏览器显示时总是独占一行
宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
可以包含内容、行内元素和其他块级元素
宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
常见块级元素：div、form、footer、h1-h6、ol、ul、p、video
设置display属性为display: block可将元素转换为块级元素
行内元素
不独占一行，默认不自动换行
宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
一般只能包含内容和其他行内元素，不可包含块级元素
设置宽高无效，宽高默认为内容的宽高
常见行内元素：span、label、a、em、strong、img
设置display属性为display: inline可将元素转换为行内元素
ps: img元素为可替换元素，宽高是由其加载的内容决定的，可以使用CSS覆盖其宽高等样式
行内块级元素
综合块级元素与行内元素的特性
不独占一行
元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
宽高未设置时默认为内容宽高
常见行内块级元素：button、input、textarea、select
设置display属性为display: inline-block可将元素设置为行内块级元素
习题
块级元素与行内元素-01
现需要设置a的顶部外边距，需要将其设置为块级元素，请补齐代码片段
a {
display: ________;
margin-top: 10px;
}
题解：a是块级元素，转变成块级元素要用display:block
答案：block
块级元素与行内元素-02
现有以下代码，请问此时span元素的高度为_____？
<style>
span {
height: 50px;
line-height: 28px;
}
</style>
<span>CSDN能力认证中心</span>
题解：span元素为行内元素，为行内元素设置宽，行内元素的宽高为内容的宽高
答案：28px
块级元素与行内元素-03
以下选项中，全部标签都为行内元素的选项是_______？
A. div、span、label、img
B. label、img.form、strong
C . img.form、strong.footer
D. span、label、img、strong
答案:D
块级元素与行内元素-04
要将p元素设置为行内元素不独占一行，请补全代码片段
<style>
p {
_________: inline;
}
</style>
<p>CSDN能力认证中心</p>
答案：display
块级元素与行内元素-05
要将div元素设置为不独占一行，且设置的宽高对元素产生影响，请补全代码片段
div {
display: _______;
}
答案：inline-block
二十六、盒子模型
知识点
什么是盒子模型
当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。
盒模型由里到外包括四个部分：内容部分，padding（内边距），border（边框），margin（外边距）
内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置
padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小
border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色
margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小
标准和怪异模型是由区分的
box-sizing: content-box; 是默认值，标准模型
box-sizing: border-box;怪异模型
box-sizing: inherit;// 规定从父元素继承此值
标准的盒子模型如下
在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小
标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小
标准盒模型实际占位高度 = height + padding-top + padding-bottom + margin-top + margin-bottom + border-top + border-bottom
怪异模型如下
在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding
怪异盒模型的实际大小 = 盒模型设置的width、height（包含border和 padding）
在怪异盒模型中，内容部分的实际宽高是盒模型的宽高减去padding和border
习题
盒子模型-01
现有如下代码片段，请问标准盒模型中div的实际占位高度为_______px
div {
width: 100px;
height: 100px;
margin: 5px;
}
题解：题目中，该盒模型只设置了height和margin，所以，div的实际占位高度 = height + margin-top + margin-bottom
答案:110
盒子模型-02
现有如下代码片段，请问标准盒模型中div的实际占位高度是________px
div {
width: 100px;
height: 100px;
margin-top: 10px;
padding-top: 10px;
}
题解：100+10+10=120
答案：120
盒子模型-03
如下代码片段，请问标准盒模型中div的实际占位高度为______px
div {
width: 100px;
height: 100px;
margin: 5px 10px;
}
题解：margin: 5px 10px;表示上下5px,左右10px.
答案：110
盒子模型-05
现有以下代码，请问最终div的实际高度是_______px
div {
box-sizing: content-box;
width: 150px;
height: 150px;
padding: 5px;
margin: 10px;
}
题解：box-sizing: content-box;表示div为标准盒模型。div实际高度 = height + padding-top + padding-bottom + border-top + border-bottom（盒子实际占位高度和实际高度不一样的）
答案：160
二十七、定位
知识点
什么是脱离文档流
文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化
position定位
position属性用于指定元素的定位类型，属性值可为
static（默认定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（粘性定位）
设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置
static定位
页面上的每个盒子从上到下、从左到右依次排列的布局
relative定位
相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变
absolute定位
元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流
fixed定位
相对于浏览器窗口进行定位，元素脱离文档流
常用于顶部导航栏、顶部搜索框、侧边联系客服等板块
sticky定位（存在兼容性问题）
根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合
常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置
层级属性z-index
用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）
习题
定位-01
使div.box2定位在div.box1上方，横线处可填写的最大整型数字是
<style>
.box {
position: relative;
}
.box1 {
position: absolute;
width: 400px;
height: 400px;
background: yellow;
z-index: _______;
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
background: orange;
z-index: 9;
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
题解：z-index属性值越高，层级越高，层级高的元素会覆盖层级低的元素。z-index值相同时，后面的元素会覆盖前面的。所以，box2的z-index值为9，box1的z-index值设置小于或等于9时，即可实现box2定位在box1上方。
答案：9
定位-02
使类名为top的div定位在类名为bottom的div上方，横线处可填写的最小整数是？
<style>
.box { position: relative; }
.top {
position: absolute;
width: 200px;
height: 200px;
background: red;
z-index: _______;
}
.bottom {
position: absolute;
width: 400px;
height: 400px;
background: blue;
z-index: 9;
}
</style>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
题解：为了不让后边的覆盖前边的，不能等于9
答案：10
定位-03
现要求“Hello，World！”文本相对于div向左偏移20px，显示效果如下图，请补全代码片段
<style>
body {
padding-left: 100px;
margin: 0px;
}
div {
position: relative;
width: 200px;
height: 200px;
background-color: #999999;
}
p {
position: absolute;
left: _______px;
}
</style>
<body>
<div>
<p>Hello，World！</p>
</div>
</body>
题解：left属性用于非static元素，规定了元素的左边框与其定位的父元素的左边框之间的偏移量。向右偏移为正数，向左偏移为负数。
答案：-20
定位-04
如下图所示，将box1元素相对于自身位置进行定位偏移（红色方框为box1发生偏移前的位置），请补全代码片段
<style>
body {
padding: 100px;
}
.box1 {
width: 150px;
height: 150px;
background-color: purple;
position: ________;
top: 50px;
left: 100px;
}
.box2 {
width: 300px;
height: 300px;
background-color: royalblue;
}
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>
题解：box2仍然在box1的下方，说明box1未脱离文档流，且题目说明box1是相对于元素自身位置进行定位偏移，由此可得知box1为相对定位。相对定位用relative。
答案：relative
定位-05
现要求将header元素进行定位，使其固定在浏览器可视窗口的最上方，请补全代码片段
header {
width: 100%;
height: 50px;
position: ________;
top: 0;
background-color: #3f93f4;
}
题解：由题可知为固定定位
答案：fixed
二十八、浮动
知识点
float属性
用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性
元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
下表为float可设置的属性值
| 属性值 |
描述 |
| none |
默认值，元素不浮动 |
| left |
元素左浮动 |
| right |
元素右浮动 |
clear属性
用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方
下表为clear可设置的属性值
| 属性值 |
描述 |
| none |
默认值，元素不浮动 |
| left |
清除左浮动 |
| right |
清除右浮动 |
| both |
清除左右两侧浮动 |
<style>
.layout {
width: 120px;
height: 300px;
margin: 10px;
background-color: cadetblue;
float: left;
}
.content {
width: 340px;
height: 300px;
margin: 10px;
background-color: powderblue;
float: left;
}
footer {
width: 500px;
height: 40px;
background-color: darkseagreen;
}
</style>
<main>
<section class="layout flex-center">侧边栏</section>
<section class="content flex-center">内容</section>
</main>
<footer></footer>
在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开
main后的footer元素在页面布局时无法在main后正常显示。
section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方
/* 清除左右两侧浮动 */
footer {
clear: both;
}
/* 或清除左侧浮动*/
footer {
clear: left;
}
浮动布局
浮动在布局中最常用于实现两列布局或三列布局
在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可
习题
浮动-01
现要求将main中的section元素在一行排列，请补全代码片段
<style>
main {
width: 500px;
}
section {
width: 80px;
height: 80px;
margin: 10px;
background-color: cadetblue;
___________: left;
}
</style>
<main>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</main>
题解：元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。用float浮动。
答案：float
浮动-02
现有以下代码片段，要求实现box1和box2在同一行排列，box3排在box1和box2下方，补全代码片段
<style>
.box1, .box2 {
width: 300px;
height: 500px;
background-color: skyblue;
float: left;
}
.box3 {
width: 800px;
height: 100px;
background-color: #f51;
______: both;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
题解：box1和box2均为浮动元素，清除浮动即可使box3排在box1和box2下方
答案：clear
浮动-03
现有以下代码，要求实现如图所示的文字环绕图片的效果，请补全代码片段
<style>
.box {
width: 300px;
}
img {
width: 100px;
margin-right: 20px;
________: left;
}
p {
text-align: justify;
}
</style>
<div class="box">
<img src="./images/logo.png" alt="logo">
<p>C站能力认证是由中国软件开发者网站CSDN制定并推出的一个能力认证标准, C站软件工程师能力认证模块包含：C1见习能力认证、C4专项能力认证、C5全栈能力认证，开发者们根据实际情况和目标选择适合自己的认证路径。</p>
</div>
答案：float
浮动-04
现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最左边的元素的类名为_____?
<style>
.box1, .box2, .box3 {
width: 200px;
height: 80px;
background-color: slateblue;
float: right;
margin: 20px;
}
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
题解：浮动的顺序是依次的，右浮动，所以从右到左是123。排在最左的是3
答案：box3
浮动-05
现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最右边的元素的类名为_____?
<style>
.box1, .box2, .box3 {
width: 200px;
height: 80px;
background-color: slateblue;
margin: 20px;
}
.box1, .box3 {
float: right;
}
.box2 {
float: left;
}
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
题解：1、3是从右到左依次，2是从左到右依次，所以三者次序，从左到右应该是，2、3、1。
答案：box1