【WEB前端开发】基础知识大总结（HTML5+CSS3）

1、background-size 属性

---

• contain

保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示

有可能出现图片无法完全覆盖背景区域

• cover

保持图片纵横比不变，最大程度覆盖背景区域

有可能导致背景图片部分区域无法显示

2、background-repeat 属性

---

• repeat（默认）

允许水平和垂直方向重复（平铺）背景图片

• repeat-x

只允许水平方向重复（平铺）背景图片

• repeat-y

只允许垂直方向重复（平铺）背景图片

3、background 属性

---

简写属性可以在一个属性声明中设置一个或多个背景属性

background: #000 url(‘bannner.png’) no-repeat cover;

上面代码的意思为：黑色背景、背景图片为：bannner.png、关闭平铺、保持图片纵横比不变

七、CSS文本属性

========================================================================

通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。

1、color 属性

---

用于设置文本的颜色，可设置的值有：

• 颜色英文名，如 red

• 十六进制值，如 #FFFFFF

• RGB值，如 rgb(255, 0, 0)

• rgba值 ，如 rgba(255, 0, 0, 0.9)

2、font-size 属性

---

用于设置文本字体大小，可以设置为绝对大小，单位为px ，也可设置为相对大小，单位为 rem 、em 等

字体大小未设置时默认字体大小为 16px

3、font-weight 属性

---

用于设置文本的粗细，可设置的值有：

| 属性值 | 说明 |

| — | — |

| normal | 标准字符（默认） |

| bold | 粗体字符 |

| bolder | 更粗的字符 |

| lighter | 更细的字符 |

| 100、200、300、400、500... | 400 相当于 normal 700 相当于 bold ，数值越大字体越粗 |

4、font-family 属性

---

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。

如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family: “PingFang SC”,“Hiragino Sans GB”,“Arial,Microsoft YaHei”,“Verdana”,“Roboto”,“Noto,Helvetica Neue”,“sans-serif”;

5、text-align 属性

---

用于设置文本的水平对齐方式，可设置的值有

• center（居中对齐）

• left（左对齐）

• right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

6、line-height 属性

---

用于设置行间距，可设置的值如下

• 数字 ：行间距为当前字体大小乘此数字

• 固定值 ：设置固定的行间距，如20px

• 百分比 ：行间距为当前字体大小乘百分比

7、text-indent 属性

---

用于指定首行缩进值，可设置的值如下

• 固定值 ：设置固定首行缩进，如20px

• 百分比 ：首行缩进值为父元素宽度乘此百分比

8、letter-spacing 属性

---

用于设置字间距，设置固定值为字间距，如10px

9、word-spacing 属性

---

用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

10、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 black;

11、text-transform 属性

---

用于设置文本大小写字母，常用属性如下

• uppercase ：全部文本均为大写字母

• lowercase ：全部文本均为小写字母

• capitalize ：文本的每个单词首字母为大写字母

12、writing-mode 属性

---

设置文本在水平或垂直方向的排布方式

• horizontal-tb ：文本流在水平方向从上到下排列，文字方向为水平方向

• sideways-lr ：文本流在垂直方向，从下至上、从左至右排列

• sideways-rl ：文本流在垂直方向，从上至下、从右至左排列

• vertical-lr ：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

• vertical-rl ：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

13、white-space 属性

---

用于设置文本的空白符处理方式，属性值如下

| 属性值 | 描述 |

| — | — |

| normal | 合并空格，换行符转化为一个空格，允许自动换行 |

| nowrap | 合并空格，换行符转化为一个空格，不允许自动换行 |

| pre | 保留空格，保留换行符，不允许自动换行 |

| pre-line | 合并空格，保留换行符，允许自动换行 |

| pre-wrap | 保留空格，保留换行符，允许自动换行 |

| break-spaces | 保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间 |

八、基础选择器

======================================================================

CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。

通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。

|

选择器类型

| 描述 |

示例

|

| :-: | — | — |

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

color: red;

} |

| 标签选择器 | 通过标签名匹配，匹配文档中所有为此标签名的元素 | p {

color: red;

} |

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

width: 100px;

} |

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

height: 100px;

} |

| 组合选择器 | 包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器 | #box>.nav p {

color: red;

} |

1、通配选择器

---

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

/*

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

*/

.box * { color: #000; }

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

• {

margin: 0;

padding: 0;

border: 0;

}

2、标签选择器

---

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

3、id选择器

---

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

4、类选择器

---

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

5、组合选择器

---

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

| 选择器 | 间隔符 | 描述 |

| — | — | — |

| 后代选择器 | 空格 | 选取该元素的后代元素 |

| 子代选择器 | > 大于号 | 选择该元素的第一级子元素 |

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

| 兄弟选择器 | ~ 波浪号 | 选择该元素之后的同层级元素 |

九、伪类选择器

======================================================================

将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。

| 伪类 | 描述 |

| — | — |

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

十、伪元素选择器

=======================================================================

伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。

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

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

|

伪元素

| 描述 | 示例 |

| :-: | — | — |

| ::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的元素 | ul li::marker {

content: '*';

} |

| ::placeholder | 用于设置表单元素占位符文本的样式 | input::placeholder {

color: blue;

} |

十一、CSS优先级

========================================================================

当创建的CSS样式表越来越多、越来越复杂的时候，一个元素的样式可能受到多个CSS样式表的影响，到底这个元素显示的是哪个样式表的样式呢？通过CSS优先级可以帮助我们得出结论。

1、CSS优先级

---

浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值

CSS的优先级如下

内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器 、伪元素选择器

通配符选择器 * 和关系选择符 +（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等对优先级没有影响

在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级

| 选择器 | 权重 |

| — | — |

| 内联样式 | 1000 |

| ID选择器 | 100 |

| 类选择器、属性选择器、伪类选择器 | 10 |

| 标签选择器、伪元素选择器 | 1 |

| 相邻选择符、子代选择符、兄弟选择符、后代选择符 | 0 |

2、选择器权重计算

---

选择器的权重可以相加

#header .nav li { list-style: none; }

该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111

对于同一个元素的两种选择器均声明了同一个属性情况

• 权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性

• 权重不同时，权重大的选择器生效

3、!important规则

当你在一个样式声明中使用 !important 规则时，这个样式将覆盖其他的任何声明

!important 规则与优先级无关，但是会直接影响样式的最终显示结果

十二、块级元素与行内元素

===========================================================================

HTML（超文本标记语言）中元素大多数为块级元素或行内元素，浏览器在显示页面时，对这两类元素的默认处理方式是不一样的。

1、块级元素

---

• 在浏览器显示时总是独占一行

• 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响

• 可以包含内容、行内元素和其他块级元素

• 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度

• 常见块级元素：div、form、footer、h1-h6、ol、ul、p、video

• 设置 display 属性为 display: block 可将元素转换为块级元素

2、行内元素

---

• 不独占一行，默认不自动换行

• 宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响

• 一般只能包含内容和其他行内元素，不可包含块级元素

• 设置宽高无效，宽高默认为内容的宽高

• 常见行内元素：span、label、a、em、strong、img

• 设置 display 属性为 display: inline 可将元素转换为行内元素

3、行内块级元素

---

• 综合块级元素与行内元素的特性

• 不独占一行

• 元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响

• 宽高未设置时默认为内容宽高

• 常见行内块级元素：button、input、textarea、select

• 设置 display 属性为 display: inline-block 可将元素设置为行内块级元素

十三、盒子模型

======================================================================

所有的HTML元素都可以看做是一个盒子模型，每个盒子模型包含外边距、内边距、边框、实际内容四个部分，通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。

1、概念

---

当对一个页面进行布局（lay out）的时候，浏览器会将所有元素表示为一个个矩形的盒子（box），HTML页面可以理解为将多个盒子堆叠累加而成。

2、盒子模型组成部分

---

盒模型由里到外包括四个部分：

• 内容部分

• padding（内边距）

• border（边框）

• margin（外边距）

内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置

• padding（内边距） 是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过 padding 相关属性设置大小

• border 指的是盒子模型的边框。border除了可以使用 border-width 设置边框大小外，可以使用 border-style 设置边框的样式，如实线、虚线，使用 border-color 设置边框颜色

• margin（外边距） 指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过 margin 相关属性设置大小

3、标准盒模型与怪异盒模型的区别

---

3.1标准盒模型

标准盒模型结构图

在标准盒模型中，给盒模型设置width和height，实际上是给内容区域设置大小

标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小

如果将div设置为标准盒模型 box-sizing：content-box ，CSS设置如下

div{

width: 100px;

height: 100px;

margin: 50px;

padding: 15px;

box-sizing: border-box;

}

检查元素如下图所示，div设置的 width 和 height 是100×100，div的实际大小是 130×130 ，div的实际宽度 = width + padding-left + padding-right + border-left + border-right = 100+ 15 + 15 + 0 + 0 = 130，div的实际高度计算同理

div在标准盒模型中的实际大小

标准盒模型属性

3.2怪异盒模型

在怪异盒模型中，给盒模型设置的 width 和 height 就是盒模型的实际大小，宽高已经包含了 border 和 padding

怪异盒模型的 实际大小 = 盒模型设置的 width、height（包含border和 padding）

在怪异盒模型中，内容部分的 实际宽高 是 盒模型的宽高减去padding和border

例如将div设置为怪异盒模型 box-sizing：border-box ，CSS设置如下

div{

width: 100px;

height: 100px;

margin: 50px;

padding: 15px;

box-sizing: border-box;

}

检查元素如下图所示，div设置的width和height设置为100×100，实际大小也是 100×100，div的实际宽度 = width，div的实际高度 = height

div在怪异盒模型中的实际大小

怪异盒模型属性

不管是标准盒模型还是怪异盒模型，margin 都不计入盒子的实际大小。但是 margin会影响盒模型所占空间，即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将 margin 计入其中。

浏览器默认使用标准盒模型，如需使用怪异盒模型，可用通过将盒模型设置为 box-sizing: border-box 实现

十四、定位

====================================================================

在一个网页的排版布局中，定位属性是最重要的属性之一，能够熟练使用定位布局对页面美化有很好的帮助。

1、脱离文档流

---

文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，当文档流

元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化

2、position定位

---

position 属性用于指定元素的定位类型，属性值可为

• static（默认定位）

• relative（相对定位）

• absolute（绝对定位）

• fixed（固定定位）

• sticky（粘性定位）

设置定位类型后可以通过设置 top、right、bottom、left 属性确定定位的位置

2.1 static定位

页面上的每个盒子从上到下、从左到右依次排列的布局

box1

box2

static定位示例

2.2 relative定位

相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变

上述 static 定位示例代码中，将 box1 设置以下属性，元素会相对于自身原始位置向右偏移 10px ，向下偏移 10px

box1

box2

relative定位示例

2.3 absolute定位

元素相对于最近的非 static 定位的祖先元素定位进行偏移，元素脱离文档流

上述 static 定位示例代码啊中，将 box2 以及其父级元素 box-container 设置如下属性

box2 元素相对于 relative 定位的 box-container 向右偏移 10px ，向下偏移 10px

box1

box2

absolute定位示例

2.4 fixed定位

相对于浏览器窗口进行定位，元素脱离文档流

常用于顶部导航栏、顶部搜索框、侧边联系客服等板块

2.5 sticky定位

存在兼容性问题

根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合

常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置

3、层级属性z-index

---

用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效

数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）

z-index 属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素

下面的 absolute 定位的示例中，给box1、box2添加背景后可以清晰看见，box2覆盖box1

box1

box2

absolute 定位层级示例

将 box1、box2 增加以 z-index 属性，可将 box1、box2 层级改变，使 box1 在 box2 的上方

box1

box2

z-index 调整后示例

十五、浮动

====================================================================

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。

后可用于所有元素，在页面布局中发挥重要作用。

1、float属性

---

用于设置元素是否浮动，absolute（绝对）定位的元素会忽略 float 属性

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

下表为float可设置的属性值

| 属性值 | 描述 |

| — | — |

| none | 默认值，元素不浮动 |

| left | 元素左浮动 |

| right | 元素右浮动 |

2、clear属性

---

用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方

下表为float可设置的属性值

| 属性值 | 描述 |

| — | — |

| none | 默认值，元素不浮动 |

| left | 清除左浮动 |

| right | 清除右浮动 |

| both | 清除左右两侧浮动 |

侧边栏

内容

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

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

未清除浮动布局示例

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

/*

清除左右两侧浮动

*/

读者福利

========

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）