2025年css面试试题及答案.docxVIP

2025年css面试试题及答案

一、CSS基础概念

1.请描述CSS选择器的优先级计算规则，并说明以下选择器的优先级顺序：`header.navli.active`、`divulli:first-child`、`.content[data-type=article]`、`bodymainp::before`。

答案：CSS选择器优先级由四元组（行内样式,ID数量,类/属性/伪类数量,元素/伪元素数量）决定，从高到低比较。具体规则：行内样式（1,0,0,0）ID选择器（0,1,0,0）类/属性/伪类（0,0,1,0）元素/伪元素（0,0,0,1）。通配符、关系符（、+、~）、否定伪类（:not）不影响优先级。

给定选择器的优先级计算：

`header.navli.active`：ID数量1（header），类数量2（.nav、.active），元素数量1（li）→优先级（0,1,2,1）

`divulli:first-child`：元素数量3（div、ul、li），伪类数量1（:first-child）→优先级（0,0,1,3）

`.content[data-type=article]`：类数量1（.content），属性数量1（[data-type]）→优先级（0,0,2,0）

`bodymainp::before`：ID数量1（main），元素数量2（body、p），伪元素数量1（::before）→优先级（0,1,0,3）

优先级顺序（从高到低）：`bodymainp::before`（0,1,0,3）`header.navli.active`（0,1,2,1）`.content[data-type=article]`（0,0,2,0）`divulli:first-child`（0,0,1,3）。

2.标准盒模型与替代盒模型（border-box）的核心区别是什么？如何通过CSS切换两种盒模型？当元素设置`width:200px;padding:20px;border:5pxsolid000`时，两种盒模型下的实际占据宽度分别是多少？

答案：标准盒模型（content-box）的`width`仅包含内容区域（content），边框（border）和内边距（padding）会额外增加元素总宽度；替代盒模型（border-box）的`width`包含内容、内边距和边框，总宽度等于设置的`width`。

通过`box-sizing`属性切换：`box-sizing:content-box`（默认）为标准盒模型，`box-sizing:border-box`为替代盒模型。

计算实际宽度：

标准盒模型：总宽度=content宽度+2×padding+2×border=200px+2×20px+2×5px=250px

替代盒模型：总宽度固定为设置的`width`（200px），此时content宽度=200px2×20px2×5px=150px。

3.什么是BFC（块格式化上下文）？触发BFC的常见方式有哪些？列举3个BFC的实际应用场景。

答案：BFC是CSS中块级盒子的渲染区域，内部元素按块级格式化规则布局，与外部区域互不影响。BFC的核心特性是：内部浮动元素会被计算高度（消除高度塌陷）、相邻块级元素的margin不会合并、BFC区域不会与浮动元素重叠。

触发BFC的常见方式：

根元素（html）

`float`值不为`none`

`position`为`absolute`或`fixed`

`display`为`inline-block`、`table-cell`、`table-caption`、`flex`、`grid`等

`overflow`值不为`visible`（如`hidden`、`auto`、`scroll`）

实际应用场景：

①解决浮动元素导致的父容器高度塌陷：将父容器触发为BFC（如设置`overflow:hidden`），则父容器会包含浮动子元素的高度。

②防止相邻块级元素的margin重叠：两个相邻的div都处于同一BFC时，上下margin会合并；将其中一个放入新的BFC（如设置`overflow:hidden`），则margin不会合并。

③实现右侧固定、左侧自适应的两栏布局：左侧元素浮动，右侧元素触发BFC（如`overflow:hidden`），右侧区域不会与左侧浮动元素重叠，从而实现自适应。

二、CSS布局与弹性盒模型

4.请对比Flexbo