文章目录

目录

文章目录

前言

Web基础

十四、语义化标签

知识点

习题

十五、表单标签

知识点

习题

十六、转义字符

知识点

习题

十七、Head头

知识点

习题

十八、CSS引入方式

知识点

习题

十九、CSS背景

知识点

习题

二十、CSS文本属性

知识点

习题

二十一、基础选择器

知识点

习题

二十二、伪类选择器

知识点

习题

二十三、伪元素选择器

知识点

习题

二十四、CSS优先级

知识点

习题

二十五、块级元素和行内元素

知识点

习题

二十六、盒子模型

知识点

习题

二十七、定位

知识点

习题

二十八、浮动

知识点

习题

---

前言

大家好，我是。

个人主页：的博客

本文讲了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 控件。Input可以设置提交按钮，但要通过type属性。

在 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 元素创建的按钮之间的不同之处。

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是页面的头部区域，

标签定义文档或者文档的一部分区域的页眉。

元素应该作为介绍内容或者导航链接栏的容器。

标签不能被放在

link是定义文档与外部资源的关系，最常见的用途是链接样式表。存在于head部分可出现任何次数

a是超链接，用属性href指定连接的目标

答案D

语义化标签-04

在HTML中一般用哪个语义化标签定义无序列表<______>

A. div

B. ul

c. ol

D. section

题解：div块级元素，ul无序列表，ol有序列表，section定义文档的区域（

标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。）

答案B

语义化标签-05

在HTML中一般用哪个语义话标签定义表单<_______>

A. aside

B. main

c. form

D. section

题解：

标签规定文档的主要内容。 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。注释：在一个文档中，不能出现一个以上的 元素。 元素不能是以下元素的后代：

、

十五、表单标签

知识点

标签

用于创建HTML表单，常用属性如下：

action：规定表单提时，表单数据提交的URL

method：规定用于发送form-data的HTTP方法，常用属性值为get、post

元素

元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的

类型

描述

text

普通文本框，一般默认20个字符宽度

textarea

多行文本框

button

普通按钮

radio

单选框

checkbox

多选框

reset

表单重置按钮

submit

表单提交按钮

password

密码输入框，密码字段使用圆点或星号代替

标签

用于为input标签提供标注，点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上，label标签的for属性值应当与相关元素的id属性值相同。

标签

用于创建下拉列表

select元素中的标签用于定义列表的可选项

元素

用于定义普通按钮

习题

表单标签-01

现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字，请补全下方代码片段

密号：

题解：pattern属性规定用于验证输入字段的正则。

title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。input元素使用title属性可以在输入内容不符合该正则时，给出提示语判断输入是否正确的提示语句只在表单提交时显示

答案：title

表单标签-02

现表单内有个提交按钮，点击后自动提交表单请求，请补全代码片段

题解：input中属性type表单提交按钮是submit，表单重置按钮是reset。普通按钮是button。

答案：submit

表单标签-03

怎么用input标签创建一个表单重置按钮？请补齐这段代码

答案：reset

表单标签-04

怎么用input标签创建一个密码输入框？请补齐这段代码

题解：placeholder 属性规定可描述输入字段预期值的简短的提示信息，placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

答案：password

表单标签-05

现有以下HTML代码，需要在点击提交按钮时，将用户名和密码自动提交到https://ac-api.csdn.net/login，请补全代码片段

十六、转义字符

知识点

在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。

显示

实体名称

实体编号

说明

空格

 

 

半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致

空格

 

 

半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致

空格

 

 

全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致

<

<

<

小于号

>

>

>

大于号

&

&

&

&符号

"

"

"

双引号

’

------

'

单引号

©

©

版权符号

™

™或�

商标符号

®

®

注册商标符号

$

------

$

美元符号

￥

¥

¥

人民币符号

×

×

×

乘号

÷

&divi de;

÷

除号

习题

转义字符-01

在HTML源代码中用什么实体名称表示版权符号 ？

答案：©

转义字符-02

在HTML源代码中用什么实体名称表示商标符号

答案：™

转义字符-03

在HTML源代码中用什么实体名称表示注册商标符号

答案：®

转义字符-04

在HTML源代码中用什么实体名称表示大于号>

答案：>

转义字符-05

在HTML源代码中用什么实体名称表示乘号x

答案：×

十七、Head头

知识点

head标签中一般可以包含以下标签：

属性

属性值

描述

href

URL

设置目标链接的文件路径

rel

stylesheet、icon、sidebar、prev等

规定当前文档与链接文档之间的关系

type

MIME_type

目标连接文档的MIME类型

用于给文档引入CSS样式信息，将样式表包含在style开始与结束标之间。 用于给页面添加js脚本，可以直接在script开始和结束标签之间包含JavaScript脚本。也可以通过script的src属性链接外部脚本文件。

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。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】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

用于为页面中的所有相对链接设置默认URL或默认target属性。

target=“_blank” 在浏览器新窗口打开文档。

习题

Head头-01

现需要在html文件中引入JS脚本文件，补全代码

十八、CSS引入方式

知识点

行内样式

直接使用HTML元素的style属性引入CSS样式

例：

软件工程师能力认证

内嵌样式

使用

外部样式

链接样式（最常用）

在标签中，使用标签链接外部的CSS文件

link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css

例：

导入样式

使用@import url()引入CSS文件

在CSS文件中直接使用@import url()

在HTML文件中需要在

// 在CSS文件中导入

@import url(style.css);

习题

CSS引入方式-01

现需要导入外部样式表，请补全代码片段

答案:stylesheet

CSS引入方式-02

现需要导入外部样式表，请补全代码片段

十九、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，请补全代码片段

答案：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、
600、700、800、900

400相当于normal
700相当于bold
数值越大字体越粗

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

现需要实现英文小写转大写，请补全代码片段

hello world

答案：text-transform

CSS文本属性-02

现需要实现古代书写从上到下，从右至左的效果（如图所示），请补全代码片段

两个黄鹂鸣翠柳，一行白鹭上青天

答案：writing-mode

CSS文本属性-03

现需要使文本不换行，且保留文本当中的四个空格，请补全代码片段

CSDN能力认证

答案：line-height

二十一、基础选择器

知识点

选择器类型

描述

示例

通配选择器

通配选择器使用一个星号*表示，*会匹配所有元素

* {
color: red;
}

标签选择器

通过标签名匹配，匹配文档中所有为此标签名的元素

p {
color: red;
}

id选择器

通过井号#来定义id选择器，根据元素的id属性匹配（精确匹配）元素

#box {
width: 300px;
}

类选择器

通过点.来定义类选择器，根据元素的class属性匹配（精确匹配）元素

.container {
height: 100px;
}

组合选择器

包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器

#box>.nav p {
color: blue;
}

通配选择器

可以与其他选择器相结合，选择某元素下的所有元素

/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/

.box * { color: #000; }

由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式

* {

margin: 0;

padding: 0;

border: 0;

}

标签选择器

标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等

id选择器

id属性的属性值应当是当前文档唯一

类选择器

class属性值在文档中可以重复

组合选择器

通过间隔符将基础选择器连接起来，实现组合选择的效果

选择器

间隔符

描述

后代选择器

空格

选取该元素的后代元素

子代选择器

>大于号

选择该元素的第一级子元素

相邻选择器

+加号

选择该元素之后相邻第一个元素，且两者具有相同的父元素

兄弟选择器

~波浪号

选择该元素之后的同层级元素

例：有以下代码，选择所有类名为title的元素后的第一个

元素，将其字体颜色改为红色，如下图所示，可使用相邻选择器选择元素设置样式

// 示例代码

CSDN能力认证中心

C1见习能力认证

C4专项能力认证

C5全栈能力认证

习题

基础选择器-01

想要选择ol元素的子代li元素，并设置字体和字体颜色样式，请补齐这段代码

CSDN能力认证中心

C1见习能力认证

C4专项能力认证

C5全栈能力认证

题解：用兄弟选择器能够选中该元素之后的所有同级元素，并给这些元素设置样式

答案：~

二十二、伪类选择器

知识点

常见的伪类

伪类

描述

: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）、公式

例：有以下代码，判断最终的样式效果

CSDN能力认证中心

C1见习能力认证

C4专项能力认证

C5全栈能力认证

你是否认为最终效果是C1见习能力认证字体为红色？实际上所有内容字体都不会变红色

对于选择器p:first-child，需要同时满足两个要求：

该元素为p元素

该元素为该元素父级元素的第一个子元素

对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分

习题

伪类选择器-01

将最后一栏背景设置为灰色，补全横线处数字

CSDN能力认证

C1见习能力认证

C4专项能力认证

CSDN

C1见习能力认证

C4专项能力认证

CSDN

C1见习能力认证

C4专项能力认证

CSDN

题解：两者的区别，nth-of-type他是当前元素的兄弟元素的第n个（也就是说四个相同标签的，一个不同标签插在其中，取的相同标签中的第n个），而nth-child是当前元素的兄弟节点的第n个当前元素（也就是说四个相同标签的，一个不同标签插在其中，取的五个标签中的第n个）。

答案：nth-of-type

二十三、伪元素选择器

知识点

一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用

为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符

伪元素

描述

示例

::after

用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素

p::after {
content: ＂结束＂;
}

::before

用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素

p::before {
content: ＂开始＂;
}

::first-line

向文本的首行添加样式，只能应用于块级元素

p::first-line {
color: #333;
}

::first-letter

向文本的首字母添加样式，只能应用于块级元素

p::first-letter {
font-size: 16px;
}

::marker

用于改变li元素的数字或符号的样式，只能作用于display属性值为list-item的元素

ulli::marker{
content:‘*’;
}

::placeholder

用于设置表单元素占位符文本的样式

input::placeholder{
color:blue;
}

例：将li元素内容前的符号设置为‘星号’

代码示例

• C1 见习工程师能力认证
• C4 专项工程师能力认证
• C5 全栈工程师能力认证

习题

伪元素选择器-01

现需要实现首行文本为红色，请补全代码片段

CSDN软件工程师能力认证

答案: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: ________

CSDN能力认证中心

C1见习能力认证

题解：权重相同时，根据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元素的高度为_____？

CSDN能力认证中心

答案：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上方，横线处可填写的最大整型数字是

题解：z-index属性值越高，层级越高，层级高的元素会覆盖层级低的元素。z-index值相同时，后面的元素会覆盖前面的。所以，box2的z-index值为9，box1的z-index值设置小于或等于9时，即可实现box2定位在box1上方。

答案：9

定位-02

使类名为top的div定位在类名为bottom的div上方，横线处可填写的最小整数是？

题解：为了不让后边的覆盖前边的，不能等于9

答案：10

定位-03

现要求“Hello，World！”文本相对于div向左偏移20px，显示效果如下图，请补全代码片段

Hello，World！

题解：left属性用于非static元素，规定了元素的左边框与其定位的父元素的左边框之间的偏移量。向右偏移为正数，向左偏移为负数。

答案：-20

定位-04

如下图所示，将box1元素相对于自身位置进行定位偏移（红色方框为box1发生偏移前的位置），请补全代码片段

box1

box2

题解：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

清除左右两侧浮动

侧边栏

内容

在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开

main后的footer元素在页面布局时无法在main后正常显示。

section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方

/* 清除左右两侧浮动 */

footer {

clear: both;

}

/* 或清除左侧浮动*/

footer {

clear: left;

}

浮动布局

浮动在布局中最常用于实现两列布局或三列布局

在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可

习题

浮动-01

现要求将main中的section元素在一行排列，请补全代码片段

题解：元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。用float浮动。

答案：float

浮动-02

现有以下代码片段，要求实现box1和box2在同一行排列，box3排在box1和box2下方，补全代码片段

题解：box1和box2均为浮动元素，清除浮动即可使box3排在box1和box2下方

答案：clear

浮动-03

现有以下代码，要求实现如图所示的文字环绕图片的效果，请补全代码片段

C站能力认证是由中国软件开发者网站CSDN制定并推出的一个能力认证标准, C站软件工程师能力认证模块包含：C1见习能力认证、C4专项能力认证、C5全栈能力认证，开发者们根据实际情况和目标选择适合自己的认证路径。

答案：float

浮动-04

现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最左边的元素的类名为_____

1

2

3

题解：浮动的顺序是依次的，右浮动，所以从右到左是123。排在最左的是3

答案：box3

浮动-05

现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最右边的元素的类名为_____

1

2

3

题解：1、3是从右到左依次，2是从左到右依次，所以三者次序，从左到右应该是，2、3、1。

答案：box1

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦