CSS面试题及详细答案.docxVIP

CSS面试题及详细答案

这份面试题覆盖CSS基础、核心布局、进阶应用、兼容与性能等高频考点，答案尽量贴合实际开发场景，避免生硬的理论堆砌，更贴近真实面试中的沟通语境。

一、基础概念类

1.说说CSS的盒模型，有哪几种？box-sizing属性的作用？

答案：

CSS盒模型是网页元素的布局基础，每个元素都会生成一个矩形盒子，核心由4部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。

主要分两种：

标准盒模型（W3C盒模型）：默认的盒模型，width/height只计算「内容区」的尺寸，比如设置width:200px，实际元素占据的宽度是200px+padding+border+margin；

怪异盒模型（IE盒模型）：width/height包含「内容区+padding+border」，设置width:200px，元素的内容区会自动收缩，整体宽度（不含margin）就是200px。

box-sizing属性就是用来切换盒模型的：

box-sizing:content-box：默认值，对应标准盒模型；

box-sizing:border-box：对应怪异盒模型。

实际开发中几乎都会给元素统一设置box-sizing:border-box，比如通过*{box-sizing:border-box;}，避免布局时反复计算padding/border的影响，提升开发效率。

2.CSS选择器有哪些？优先级怎么计算？

答案：

常见的选择器分几类：

基础选择器：通配符（*）、元素选择器（div、p）、类选择器（.box）、ID选择器（#header）、属性选择器（[type=text]）；

组合选择器：后代选择器（div.box）、子选择器（div.box）、相邻兄弟选择器（div+.box）、通用兄弟选择器（div~.box）；

伪类选择器：状态伪类（:hover、:active）、结构伪类（:nth-child()、:first-child）、其他（:not()、:focus）；

伪元素选择器：::before、::after、::first-letter等。

优先级计算核心是「权重值」，权重从高到低排序：

!important（最高，非权重值，直接覆盖其他样式）；

内联样式（style=xxx，权重值1000）；

ID选择器（权重值100）；

类/伪类/属性选择器（权重值10）；

元素/伪元素选择器（权重值1）；

通配符、继承的样式（权重值0）。

计算规则：

权重值按「位」比较，不是简单相加（比如10个类选择器（100）也比不过1个ID选择器（100）？不对，是10个类选择器权重是10*10=100，和1个ID选择器权重相等，此时「后写的样式」生效）；

同权重下，写在后面的样式覆盖前面的；

继承的样式优先级最低，就算父元素加了!important，子元素继承的样式也不如子元素自身的基础选择器样式。

举个例子：

#header.navli:hover→权重：100（#header）+10（.nav）+1（li）+10（:hover）=121；

div#content.box→权重：1（div）+100（#content）+10（.box）=111；

所以前者优先级更高。

注意：!important尽量少用，只在紧急覆盖内联样式时用，滥用会导致样式难以维护。

二、核心布局类

3.什么是BFC？触发条件和应用场景？

答案：

BFC（BlockFormattingContext，块级格式化上下文）是CSS的一种渲染规则，简单说就是「一个独立的布局环境」，内部元素的布局不会影响外部元素，外部也不会影响内部。

触发条件（满足其一即可）：

根元素（html）；

浮动元素（float不为none）；

绝对/固定定位元素（position:absolute/fixed）；

行内块元素（display:inline-block）；

表格单元格/标题（display:table-cell/table-caption）；

溢出元素（overflow不为visible，常用overflow:hidden/auto）；

flex/grid容器（display:flex/grid）。

核心应用场景：

清除浮动：父元素触发BFC后，会包裹住浮动的子元素，解决父元素高度塌陷问题（比额外加空div清除浮动更优雅）；

防止margin重叠：两个相邻的块级元素margin会重叠（比如上下两个div，margin-top:20px和margin-bottom:30px，实际间距是30px），把其中一个元素包在BFC容器里，就能避免重