2025年高频关于css面试题及答案.docxVIP

2025年高频关于css面试题及答案

盒模型的类型及区别：CSS中盒模型分为标准盒模型（W3C盒模型）和怪异盒模型（IE盒模型）。标准盒模型的width和height仅包含内容区域（content），不包括内边距（padding）、边框（border）和外边距（margin）；而怪异盒模型的width和height包含内容、内边距和边框，即width=content+padding+border，height同理。通过box-sizing属性控制盒模型类型，默认值为content-box（标准盒模型），设置为border-box时启用怪异盒模型。例如，设置一个div的width为200px，padding为20px，border为5px，使用content-box时实际占据宽度为200+202+52=250px；使用border-box时实际内容宽度为200-202-52=150px。

CSS选择器的优先级计算规则：选择器优先级由四个层级的数值决定，从高到低依次为内联样式（1,0,0,0）、ID选择器（0,1,0,0）、类/属性/伪类选择器（0,0,1,0）、元素/伪元素选择器（0,0,0,1）。通配符（）、关系选择符（+、、~等）和否定伪类（:not）不影响优先级。计算时将各类型选择器的数量对应到层级中，数值大的优先级更高；若层级数值相同，后定义的样式会覆盖先定义的。例如，nav.itema（0,1,1,1）的优先级高于divulli（0,0,0,3），因为ID选择器的层级更高；而两个类选择器叠加（.box.active，0,0,2,0）优先级高于单个ID选择器（0,1,0,0）吗？不，ID选择器的层级是第二级，类选择器是第三级，所以0,1,0,0的优先级高于0,0,2,0。

BFC的定义、触发条件及应用场景：BFC（块级格式化上下文）是页面中的一个独立渲染区域，内部元素的布局不受外部影响，且与外部元素的边距不会发生折叠。触发条件包括：根元素（html）、float值不为none、position为absolute或fixed、display为inline-block、table-cell、table-caption、flex、grid、flow-root（最常用的现代方式）、overflow值不为visible（除visible外的其他值如hidden、auto、scroll）。应用场景包括：解决相邻块级元素的margin塌陷（垂直边距合并），例如两个兄弟div都有margin-top和margin-bottom，放入各自的BFC中可避免合并；清除浮动（父元素触发BFC后会包含浮动子元素的高度，防止父元素高度坍塌）；防止文字环绕浮动元素（给文字容器触发BFC后，文字不会环绕到浮动元素周围）。

Flex布局中flex:1的具体含义：flex是flex-grow、flex-shrink、flex-basis的简写属性。flex:1等价于flex:110%，即flex-grow为1（放大比例），flex-shrink为1（缩小比例），flex-basis为0%（基准尺寸）。flex-grow控制剩余空间的分配比例，当容器宽度大于子元素总宽度时，剩余空间按flex-grow的比例分配；flex-shrink控制空间不足时的缩小比例，当容器宽度小于子元素总宽度时，超出部分按flex-shrink的比例缩小；flex-basis定义子元素的初始基准尺寸，0%表示基于内容的最小尺寸（但会根据容器调整）。例如，容器宽度为600px，三个子元素分别设置flex:1、flex:2、flex:3，总flex-grow为6，剩余空间600px（假设子元素初始总宽度为0），则三个子元素最终宽度为600(1/6)=100px、600(2/6)=200px、600(3/6)=300px。

Grid布局与Flex布局的适用场景对比：Flex布局是一维布局（单行或单列），适合在一个方向上排列元素，例如导航栏、按钮组等线性布局；Grid布局是二维布局（行和列同时控制），适合需要同时在行列两个方向上定义网格轨道的场景，例如卡片网格、复杂表单、页面整体布局。例如，实现一个4列的响应式卡片列表，使用Grid的grid-template-columns:repeat(auto-fill,minmax(250px,1fr))可以更方便地控制列数和列宽；而Flex布局需要通过flex-wrap:wrap配合flex-basis来模拟，不如Grid直接。Grid支持显式网格（explicitgrid）和隐式网格（implicitgrid），可通过grid-auto-rows控制新增行的高度；Flex则更适合动态调整单个元素的伸缩性。

C