2025年关于css面试题及其答案解析.docxVIP

2025年关于css面试题及其答案解析

1.如何准确计算CSS选择器的优先级？

选择器优先级由四个层级的数值（行内样式、ID、类/伪类/属性、元素/伪元素）构成，用四元组表示为（a,b,c,d）。计算规则为：行内样式a=1（否则a=0），ID选择器数量累加b，类/伪类/属性选择器数量累加c，元素/伪元素选择器数量累加d。优先级比较时从左到右逐位比较，高位数值大则优先级高，同层级时后定义的样式覆盖先定义的。

示例：`navulli.active`的优先级为（0,1,1,2）（1个ID、1个类、2个元素）；`.header.logo::before`的优先级为（0,0,2,1）（2个类、1个伪元素）。若两者冲突，前者优先级更高。需注意通配符``、关系选择符（、+、~等）和否定伪类`:not()`不影响优先级计算，`:not()`仅作为筛选条件，其内部选择器参与优先级计算。

2.标准盒模型与IE盒模型的核心区别是什么？如何统一不同浏览器的盒模型表现？

标准盒模型（W3C盒模型）中，元素的`width`和`height`仅包含内容区域（content），不包括内边距（padding）、边框（border）和外边距（margin）。IE盒模型（怪异盒模型）中，`width`和`height`包含内容、内边距和边框，即`width=content+padding+border`。

现代浏览器默认使用标准盒模型，但早期IE（IE6及以下未声明DOCTYPE时）使用IE盒模型。为统一表现，可通过`box-sizing`属性控制：`box-sizing:content-box`（标准盒模型，默认值）；`box-sizing:border-box`（IE盒模型效果）。实际开发中，常用全局声明`{box-sizing:border-box;}`避免盒模型差异导致的布局问题，但需注意嵌套元素的`box-sizing`继承性（默认继承父级，可显式设置）。

3.什么是BFC（块格式化上下文）？触发条件有哪些？常见应用场景包括哪些？

BFC是CSS中块级盒子的渲染区域，是一个独立的渲染环境，内部元素的布局不受外部影响，也不会影响外部元素。触发BFC的条件包括：

-根元素（`html`）；

-`float`值不为`none`；

-`position`为`absolute`或`fixed`；

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

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

BFC的典型应用场景：

（1）解决浮动元素导致的父容器高度塌陷：父容器触发BFC后，会包含内部浮动元素的高度；

（2）避免相邻块级元素的外边距合并（MarginCollapse）：两个BFC容器的相邻外边距不会合并；

（3）防止文字环绕浮动元素：BFC区域不会与浮动元素重叠，可实现右侧自适应的两栏布局（左侧浮动，右侧设置`overflow:hidden`触发BFC）。

4.详细说明Flexbox中`flex`属性的简写规则，以及`flex-grow`、`flex-shrink`、`flex-basis`的优先级关系。

`flex`属性是`flex-grow`、`flex-shrink`、`flex-basis`的简写，默认值为`01auto`。常见简写形式包括：

-`flex:auto`→`11auto`（元素可增长、可收缩，基准为自身内容尺寸）；

-`flex:none`→`00auto`（元素不可增长、不可收缩，基准为自身内容尺寸）；

-`flex:1`→`110%`（元素可增长、可收缩，基准为0%（即容器剩余空间按比例分配））；

-`flex:23300px`→显式设置三个属性值。

三个属性的优先级关系：`flex-basis`定义元素在分配剩余空间前的初始尺寸，优先于`width`（若`flex-basis`为`auto`，则使用`width`或内容尺寸）；`flex-grow`控制元素在剩余空间中的扩展比例（剩余空间=容器宽度-所有元素的`flex-basis`之和）；`flex-shrink`控制元素在空间不足时的收缩比例（收缩量=（元素`flex-basis`-可用空间）×收缩系数/总收缩系数）。当容器空间足够时，`flex-shrink`不生效；空间不足时，`flex-grow`不生效。

5.Grid布局中`grid-