2025前端面试 —— CSS 篇为了在后续的求职过程中能够更高效地回顾与温习，根据作者此前面试准备历程，以及近期所积累

一、盒模型*

盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

两种盒模型

W3C 标准盒模型: width/height = content
IE 盒模型(怪异盒模型): width/height = content + border + padding

  box-sizing: content-box; /**是W3C标准盒模型（默认）*/
  box-sizing: border-box; /*是IE盒模型*/

二、Flex 布局有哪些常用属性及分别是什么作用

Flex 布局，即弹性盒子布局（Flexible Box Layout），是一种用于为盒状模型提供最大灵活性的布局模型。它能够轻松地实现元素的排列、对齐和空间分配，尤其适用于响应式设计。

基本概念

Flex 布局涉及两个核心概念：Flex 容器（Flex Container）和 Flex 项目（Flex Item）。

Flex 容器：通过设置元素的 display 属性为 flex 或 inline-flex，该元素就成为了一个 Flex 容器。Flex 容器是包含 Flex 项目的父元素，它定义了 Flex 项目的布局方式。
Flex 项目：Flex 容器内的直接子元素就是 Flex 项目。这些项目会根据 Flex 容器的属性进行排列和布局。

容器属性

1. `display`

用于定义一个元素为 Flex 容器，有两个值可选：

flex：将元素显示为块级 Flex 容器。
inline-flex：将元素显示为行内 Flex 容器。

2. `flex-direction`

定义 Flex 项目的排列方向，有四个值：

row（默认值）：项目水平排列，从左到右。
row-reverse：项目水平排列，从右到左。
column：项目垂直排列，从上到下。
column-reverse：项目垂直排列，从下到上。

3. `flex-wrap`

定义 Flex 项目是否换行，有三个值：

nowrap（默认值）：项目不换行，可能会溢出容器。
wrap：项目换行，第一行在上方。
wrap-reverse：项目换行，第一行在下方。

4. `flex-flow`

是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。

5. `justify-content`

定义 Flex 项目在主轴上的对齐方式，有五个常见值：

flex-start（默认值）：项目在主轴开始处对齐。
flex-end：项目在主轴结束处对齐。
center：项目在主轴中间对齐。
space-between：项目均匀分布，第一个项目在主轴开始处，最后一个项目在主轴结束处。
space-around：项目均匀分布，每个项目两侧的间隔相等。

6. `align-items`

定义 Flex 项目在交叉轴上的对齐方式，有五个常见值：

stretch（默认值）：项目拉伸以填充容器的交叉轴。
flex-start：项目在交叉轴开始处对齐。
flex-end：项目在交叉轴结束处对齐。
center：项目在交叉轴中间对齐。
baseline：项目的基线对齐。

7. `align-content`

定义多根轴线在交叉轴上的对齐方式，当 flex-wrap 为 wrap 或 wrap-reverse 时才生效，有六个值：

stretch（默认值）：轴线拉伸以填充容器的交叉轴。
flex-start：轴线在交叉轴开始处对齐。
flex-end：轴线在交叉轴结束处对齐。
center：轴线在交叉轴中间对齐。
space-between：轴线均匀分布，第一根轴线在交叉轴开始处，最后一根轴线在交叉轴结束处。
space-around：轴线均匀分布，每根轴线两侧的间隔相等。

项目属性

1. `order`

定义项目的排列顺序，数值越小，排列越靠前，默认值为 0。

2. `flex-grow`

定义项目的放大比例，默认值为 0，表示不放大。如果所有项目的 flex-grow 值都为 1，则它们将平均分配剩余空间。

.item {
    flex-grow: 1;
}

3. `flex-shrink`

定义项目的缩小比例，默认值为 1，表示如果空间不足，项目将缩小。

.item { 
    flex-shrink: 0; /* 不缩小 */ 
}

4. `flex-basis`

定义项目在分配多余空间之前的初始大小，默认值为 auto，即项目的本来大小。

.item { 
    flex-basis: 200px;
 }

5. `flex`

是 flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。常用的快捷值有 auto（1 1 auto）和 none（0 0 auto）。

.item { 
    flex: 1; /* 等同于 flex: 1 1 0 */ 
}

6. `align-self`

允许单个项目在交叉轴上有与其他项目不同的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性。

.item { 
    align-self: flex-end; 
}

三、BFC

1. 什么是 BFC？

BFC（Block Formatting Context）是 Web 页面中的一个独立渲染区域，具有自己的布局规则，内部元素不会影响外部元素。

BFC 的特性

内部元素垂直排列：默认情况下，BFC 内的块级元素会垂直排列。
外边距不会折叠（Margin Collapse） ：同一个 BFC 内的相邻块级元素会发生 margin 合并，但不同 BFC 之间不会。
包含浮动元素：BFC 可以包裹浮动元素，避免父元素高度塌陷。
不与浮动元素重叠：BFC 区域不会与浮动元素（float）重叠。

2. 如何触发 BFC？

以下 CSS 属性可以触发 BFC：

触发条件	示例
`float` 不为 `none`	`float: left;`
`position` 为 `absolute` 或 `fixed`	`position: absolute;`
`display` 为 `inline-block`、`table-cell`、`flex`、`grid`	`display: flex;`
`overflow` 不为 `visible`	`overflow: hidden;`
`contain` 为 `layout`、`content`、`paint`	`contain: layout;`

最常用的 BFC 触发方式：

.container {
  overflow: hidden; /* 触发 BFC */
}

3. BFC 的常见应用场景

(1) 解决外边距折叠（Margin Collapse）

问题：相邻元素的 margin-top 和 margin-bottom 会合并（取最大值）。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距是 30px（不是 20 + 30） */

解决方案：用 BFC 隔离其中一个元素。

<div class="bfc-container">
  <div class="box1">Box 1</div>
</div>
<div class="box2">Box 2</div>

.bfc-container {
  overflow: hidden; /* 触发 BFC */
}
/* 现在 margin 不会合并 */

(2) 清除浮动（防止父元素高度塌陷）

问题：子元素 float 后，父元素高度塌陷（高度为 0）。

<div class="parent">
  <div class="float-child">Float</div>
</div>

.float-child { float: left; }
.parent { border: 1px solid red; } /* 高度为 0 */

解决方案：让父元素触发 BFC。

.parent {
  overflow: hidden; /* 触发 BFC，包裹浮动元素 */
}

(3) 避免浮动元素覆盖

问题：浮动元素会覆盖后面的普通流元素。

<div class="float-left">Float Left</div>
<div class="normal-box">Normal Box</div>

.float-left { float: left; width: 100px; }
.normal-box { background: #ccc; } /* 被浮动元素覆盖 */

解决方案：让普通流元素触发 BFC。

.normal-box {
  overflow: hidden; /* 触发 BFC，避免与浮动元素重叠 */
}

四、如何在老式浏览器上实现滚动且不显示滚动条

模拟滚动

给包含内容的元素设置一个固定的高度和overflow:hidden属性，隐藏超出部分的内容。
使用 JavaScript 监听鼠标滚轮或触摸事件，当用户进行滚动操作时，通过改变元素的scrollTop或scrollLeft属性来模拟滚动效果。

利用绝对定位和动画

将内容区域设置为相对定位，内部的可滚动内容设置为绝对定位。
使用 JavaScript 根据用户的滚动操作，通过改变绝对定位元素的top或left属性来实现内容的滚动，同时可以添加动画效果来使滚动更加流畅。

五、CSS3 新特性

选择器

属性选择器：可以根据元素的属性及属性值来选择元素，如[attribute^=value]表示选择属性值以value开头的元素。
伪类选择器：新增了:nth - child(n)、:nth - of - type(n)等，能更精准地选择特定位置的元素。

盒模型

弹性盒布局（Flexbox） ：提供了一种更灵活的方式来布局网页元素，能轻松实现水平或垂直居中、自适应布局等。
网格布局（Grid） ：将网页划分为行和列的网格，使页面布局更加规整和强大，适合复杂的页面布局。

背景和边框

背景：支持多背景图像，通过background - image属性可以设置多个背景图像，还能设置背景的大小、位置等。
边框：可以通过border - radius属性实现圆角边框，box - shadow属性添加盒子阴影，border - image属性用图像来绘制边框。

文本效果

文本阴影：使用text - shadow属性为文本添加阴影效果，使其更具立体感。
文字换行：word - wrap和word - break属性可以控制文本在换行时的行为，避免单词溢出容器。

2D/3D 转换

2D 转换：通过translate、rotate、scale、skew等函数对元素进行平移、旋转、缩放和倾斜等操作。
3D 转换：能创建三维空间中的元素效果，如perspective属性设置透视效果，transform - style属性指定元素在 3D 空间中的呈现方式。

动画

过渡（Transition） ：通过transition属性可以实现元素属性值的平滑过渡，如改变元素的颜色、大小等。
动画（Animation） ：使用@keyframes规则定义动画关键帧，再通过animation属性应用到元素上，可创建复杂的动画效果。

2025前端面试 —— CSS 篇