2025年css面试题及答案.docxVIP

2025年css面试题及答案

Q1：解释CSS盒模型的标准盒模型与替代盒模型（border-box）的核心差异，并说明如何通过CSS属性切换这两种模式。

标准盒模型（content-box）中，元素的宽度（width）和高度（height）仅包含内容区域（content），不包含内边距（padding）、边框（border）和外边距（margin）。例如设置width:200px时，实际占据的水平空间为width+padding-left+padding-right+border-left+border-right。

替代盒模型（border-box）中，width和height属性包含内容区域、内边距和边框，即元素总宽度固定为设置的width值，内容区域宽度会自动调整（content-width=width-padding-border）。这种模式更符合“容器总尺寸固定”的常见布局需求，避免因内边距或边框导致尺寸溢出。

通过box-sizing属性切换：默认值为content-box，设置box-sizing:border-box可启用替代盒模型。需注意全局重置时通常使用{box-sizing:border-box;}，但需考虑伪元素是否继承该属性（可补充::before,::after{box-sizing:inherit;}）。

Q2：列举CSS选择器的优先级计算规则，并说明以下选择器的优先级顺序（从高到低）：

①divheaderp.link

②.navli.active

③main::before

④bodysection:not(.sidebar)

CSS选择器优先级基于“特指度（Specificity）”计算，采用四元组(a,b,c,d)表示：

-a：内联样式（行内style属性），出现则为1，否则0；

-b：ID选择器数量；

-c：类选择器、属性选择器、伪类数量；

-d：元素选择器、伪元素数量。

比较时从a到d逐级比较，数值大的优先级更高。通配符（）、关系选择器（、+、~等）、否定伪类（:not()）不影响特指度（:not()内部选择器参与计算）。

各选择器特指度计算：

①divheaderp.link→ID选择器1个（b=1），类选择器1个（c=1），元素选择器2个（d=2）→(0,1,1,2)

②.navli.active→类选择器2个（c=2），元素选择器1个（d=1）→(0,0,2,1)

③main::before→ID选择器1个（b=1），伪元素1个（d=1）→(0,1,0,1)

④bodysection:not(.sidebar)→元素选择器2个（d=2），:not()内部类选择器1个（c=1）→(0,0,1,2)

优先级顺序（从高到低）：③（0,1,0,1）①（0,1,1,2）②（0,0,2,1）④（0,0,1,2）。注：③的b=1高于①的b=1但c=0vs①的c=1？不，四元组比较时先比b，③和①的b均为1，接着比c：③的c=0，①的c=1，因此①的优先级高于③？此处需修正：原计算错误。

正确计算：

①divheader（ID选择器1个）p（元素选择器1个）.link（类选择器1个）→结构为header（ID）作为父级，div和p是元素，.link是类。因此具体选择器分解为：div（元素）、header（ID）、p（元素）、.link（类）→最终特指度是ID数量1（b=1），类数量1（c=1），元素数量2（d=2）→(0,1,1,2)。

③main（ID选择器1个）::before（伪元素1个）→特指度是ID数量1（b=1），伪元素数量1（d=1）→(0,1,0,1)。

比较①和③：b均为1，比较c：①的c=1③的c=0→因此①的优先级高于③。

正确顺序应为：①（0,1,1,2）③（0,1,0,1）②（0,0,2,1）④（0,0,1,2）。

Q3：说明Flex布局中flex:1的完整展开形式，并解释各参数的含义。当子元素设置flex:1时，其宽度如何计算？

flex是flex-grow、flex-shrink、flex-basis的简写属性，默认值为01auto。flex:1的完整展开形式是110%（注意不是0，规范中flex:1等价于flex-grow:1;flex-shrink:1;flex-basis:0%）。

各参数含义：

-flex-grow：扩展因子，定义剩余空间的分配比例（默认0，不扩展）；

-flex-shrink：收缩因子，定义空间不足