引言

在前端开发的面试中，CSS3 的知识点往往会成为考核的重点。无论是盒子模型的深层理解，还是对各种选择器和单位的熟练运用，都是面试官关注的内容。为了帮助大家在面试中游刃有余，呆同学将总结一些 CSS3 的高频考点，包括盒子模型的标准和兼容模式、各种 CSS 选择器的应用、常见单位的区别、隐藏元素的方式以及块级格式化上下文（BFC）的应用场景等等。希望通过这些总结，你能更好地掌握 CSS3 的核心概念，提高面试的成功率。

在我们面对一个问题是，我们可以从几个角度来分析：是什么，有什么优缺点或者特点，应用场景

1. CSS 盒子模型

是什么

浏览器在渲染页面时，会将容器渲染成包含content、padding、margin、border 四部分的矩形。每个元素被视作一个矩形盒子，包含四个部分：

• 内容（content） ：实际显示的内容区域。
• 内边距（padding） ：内容与边框之间的空白区域。
• 边框（border） ：包围内容和内边距的边框线。
• 外边距（margin） ：元素与其他元素之间的空间。

特点

盒子模型主要分为两种：标准盒模型、IE 盒模型

盒子模型	描述	计算方式
标准盒模型	width 和 height 只包含内容区域的尺寸	width = content
IE 盒模型	width 和 height 包括内容区域、内边距和边框	width = content + padding + border

切换方法

标准盒模型：

box-sizing: content-box;

IE 盒模型：

box-sizing: border-box;

用例分析

假设我们有一个 div 元素，其 width 设置为 200px，内边距为 20px，边框为 5px。以下是两种盒子模型的实际效果：

/* 标准盒模型 */
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

在标准盒模型中，div 的实际宽度为 200px（width） + 20px（内边距）*2 + 5px（边框）*2 = 250px。

/* IE 盒模型 */
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

在 IE 盒模型中，div 的实际宽度包括内边距和边框，因此它总宽度仍为 200px。

盒子模型	设置的宽度	内边距	边框	实际宽度计算	实际宽度
标准盒模型	200px	20px	5px	200px (内容) + 20px * 2 (内边距) + 5px * 2 (边框) = 250px	250px
IE 盒模型	200px	20px	5px	200px (包含内边距和边框)	200px

2. CSS 中的选择器

CSS 选择器用于选择和样式化 HTML 元素。以下是常见选择器的分类及示例：

选择器类型	选择器	示例
ID 选择器	#id	#header
Class 选择器	.class	.button
标签选择器	element	p
后代选择器	ancestor descendant	div p
子选择器	parent > child	ul > li
兄弟选择器	element + sibling	h1 + p (紧接着的兄弟元素)
群组选择器	selector1, selector2	h1, h2, h3
属性选择器	[attribute="value"]	input[type="text"]
伪类选择器	:pseudo-class	:hover, :nth-child(2)
伪元素选择器	::pseudo-element	::before, ::after

选择器优先级

CSS 选择器的优先级决定了在多个规则冲突时应用哪一条规则。优先级顺序如下：

1. !important
2. 行内样式
3. ID 选择器
4. Class 选择器、属性选择器、伪类选择器
5. 标签选择器、伪元素选择器
6. 群组选择器

3. em、rem、vw、vh、px 的区别

不同的 CSS 单位适用于不同的场景，CSS3 引入了新的单位，如 rem、vw、vh，以提高样式的适配性和灵活性。

区别

单位	描述	示例
px	绝对单位，固定大小	font-size: 16px;
em	相对单位，相对于父元素的字体大小	font-size: 1.5em;
rem	相对单位，相对于根元素（html）的字体大小	font-size: 1rem;
vw	视口宽度单位，视口宽度的百分之一	width: 50vw;
vh	视口高度单位，视口高度的百分之一	height: 50vh;

用例分析

假设我们有一个根元素字体大小为 16px，并且我们要设置子元素的字体大小：

html {
  font-size: 16px;
}

p {
  font-size: 1.5em; /* 24px (16px * 1.5) */
}

h1 {
  font-size: 2rem;  /* 32px (16px * 2) */
}

.container {
  width: 50vw;      /* 视口宽度的一半 */
  height: 50vh;     /* 视口高度的一半 */
}

4. CSS 中如何可以隐藏一个元素？

CSS 提供了多种方式来隐藏元素，每种方法对文档流和事件处理的影响不同：

方法总结

方法	影响	示例
display: none;	无文档流，不会触发事件，会回流重绘	display: none;
opacity: 0;	有文档流，会触发事件，不会回流	opacity: 0;
width: 0; height: 0;	无文档流，不会触发事件，会回流	width: 0; height: 0;
visibility: hidden;	有文档流，不会触发事件，不会回流	visibility: hidden;
clip-path: rect(0,0,0,0);	有文档流，不会触发事件，不会回流	clip-path: rect(0,0,0,0);

回流（Reflow）

回流是指浏览器重新计算元素的尺寸和位置，以及页面布局的过程。每当元素的几何属性（如宽度、高度、边距、内边距、边框等）发生变化，或者文档结构发生变化时，就会触发回流。回流会影响整个页面的布局，因此通常开销较大。

重绘（Repaint）

重绘是指浏览器重新绘制元素的外观，而不改变布局。重绘只涉及元素的视觉表现（如颜色、背景色、边框颜色等），而不会影响元素的尺寸和位置。

回流与重绘的关系

• 回流必定触发重绘: 当发生回流时，浏览器会重新计算布局并重新绘制所有受影响的区域。因此，回流会导致重绘。
• 重绘不一定触发回流: 当仅有视觉属性改变时，浏览器只需要重绘而不需要重新计算布局。因此，重绘可能不涉及回流。

文档流是指浏览器根据 HTML 元素的默认布局规则（如块级元素、行内元素、浮动等）来渲染页面的过程。元素的布局、排列和定位都依赖于其在文档中的顺序和CSS样式。

脱离文档流指的是那些不再按照文档流的默认规则进行布局的元素。这些元素的布局不会影响到其他元素的位置，反之亦然。

脱离文档流的元素：

• display: none; : 元素完全从文档流中移除，不占空间，也不会触发事件。
• float: 元素浮动脱离文档流，会使周围内容围绕它流动。
• position: absolute; 或 position: fixed; : 元素相对于其定位祖先元素定位，不影响其他元素的布局。

用例分析

假设我们有一个 div 元素需要隐藏：

/* 隐藏并移除元素 */
.hidden-element {
  width: 100px;
  height: 100px;
  display: none;
}

/* 仅隐藏内容但保持空间 */
.hidden-element {
  width: 100px;
  height: 100px;
  opacity: 0;
}

/* 隐藏但仍保留空间 */
.hidden-element {
  width: 0;
  height: 0;
}

/* 隐藏但保持空间 */
.hidden-element {
  width: 100px;
  height: 100px;
  visibility: hidden;
}

5. 什么是 BFC (块级格式化上下文)

是什么

BFC叫做块级格式化上下文，是一种特殊的容器，拥有一套自己的渲染规则。

规则

1. BFC容器内部子容器依据遵从块级、行内块、行内元素的排列规则

2. BFC容器在计算高度时，会将浮动元素的高度也计算在内，通常用这种方法清除浮动

3. BFC容器的margin-top 不会跟子容器的margin-top重叠

触发条件

触发条件	示例	说明
overflow: hidden;	overflow: hidden;	创建一个 BFC，元素的溢出内容被隐藏
float: left; 或 float: right;	float: left;	浮动元素创建 BFC
display: inline-block;	display: inline-block;	创建一个 BFC，行内块元素
display: inline-flex;	display: inline-flex;	创建一个 BFC，行内弹性盒子
display: inline-table;	display: inline-table;	创建一个 BFC，行内表格
display: table;	display: table;	创建一个 BFC，表格
position: absolute; 或 position: fixed;	position: absolute;	创建一个 BFC，绝对定位元素

应用场景

1. 清除浮动

• 问题: 当浮动元素的容器高度被内容所覆盖时，容器高度可能会变为 0。
• 解决方案: 通过创建 BFC，可以使包含浮动元素的容器正确计算高度，从而避免这种问题。

2. 防止 margin 重叠

• 问题: 垂直方向上的相邻块级元素可能会发生 margin 重叠，导致布局不如预期。
• 解决方案: 通过创建 BFC，容器内的元素不会与外部元素的 margin 重叠，从而解决这个问题。

3. 避免元素被挤压

• 问题: 有时在某些布局中，元素可能会被其他元素挤压，从而影响其显示。
• 解决方案: 使用 BFC 可以隔离元素，使其不会被周围元素的布局影响。

总结

今天，我们深入探讨了 CSS3 的多个核心概念，包括盒子模型、选择器类型、单位的区别、元素隐藏的方法，以及块级格式化上下文（BFC）的应用场景。我们详细分析了标准和 IE 盒子模型的实际宽度计算，理解了“文档流”及其相关概念，探讨了元素脱离文档流后的行为。通过实际示例和表格总结，我们更好地掌握了这些概念的实际应用，在未来呆同学将继续总结一些 CSS3 的高频考点。