前端CSS高频面试题及答案.docx

前端CSS高频面试题及答案

1.请说明CSS盒模型的组成，以及标准盒模型和IE盒模型的区别？如何切换盒模型类型？

答案：

CSS盒模型由4部分组成：content（内容区）、padding（内边距）、border（边框）、margin（外边距）。

标准盒模型（W3C标准）：元素总宽度=content宽度+padding+border+margin；设置的width/height仅作用于content区。

IE盒模型（怪异模式）：元素总宽度=width（含content+padding+border）+margin；设置的width/height包含content、padding和border。

切换方式：通过box-sizing属性控制

/*标准盒模型（默认）*/

box-sizing:content-box;

/*IE盒模型*/

box-sizing:border-box;

实际开发中常用border-box，避免padding/border撑大元素，减少布局计算量。

2.CSS选择器的优先级如何计算？!important会产生什么影响？

答案：

优先级从高到低分为4个等级（权重值可简单理解为：1000/100/10/1）：

内联样式（style属性）：权重1000

ID选择器（#id）：权重100

类/伪类/属性选择器（.class/:hover/[type=text]）：权重10

元素/伪元素选择器（div/:before）：权重1

计算规则：同等级选择器权重叠加，等级高的优先级永远高于等级低的（如1个ID选择器10个类选择器）；优先级相同则后定义的样式覆盖前定义的。

!important作用：强制提升单个样式声明的优先级（高于所有同属性的普通声明），但需注意：

仅作用于单个样式，不提升选择器整体优先级；

避免滥用（可能导致样式难以维护），仅在修复第三方样式冲突等特殊场景使用；

若两个声明都加!important，仍按选择器优先级决定。

3.Flex布局中，flex:1具体代表什么？flex容器的常见属性有哪些？

答案：

flex:1是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，含义，：

flex-grow:1：当容器有剩余空间时，该项目按比例分配剩余空间（1表示占1份）；

flex-shrink:1：当容器空间不足时，该项目按比例缩小（1表示允许缩小）；

flex-basis:0%：项目的基准宽度为0，最终宽度由剩余空间分配决定（区别于auto，auto会先考虑项目自身内容宽度）。

Flex容器常见属性：

flex-direction：控制主轴方向（row/column/row-reverse/column-reverse）；

justify-content：主轴方向对齐方式（flex-start/center/flex-end/space-between/space-around）；

align-items：交叉轴方向单行对齐方式（flex-start/center/flex-end/stretch/baseline）；

flex-wrap：是否换行（nowrap/wrap/wrap-reverse）；

align-content：交叉轴方向多行对齐方式（仅换行时生效，同justify-content可选值）。

4.绝对定位（absolute）和固定定位（fixed）的区别是什么？sticky定位有什么特点？

答案：

绝对定位（absolute）：

相对于最近的已定位祖先元素（非static定位，如relative/absolute/fixed）定位；若没有已定位祖先，则相对于根元素（html）定位；脱离文档流，不占据原位置。

固定定位（fixed）：

仅相对于浏览器视口定位，滚动页面时位置固定不变；脱离文档流，不占据原位置；常用作顶部导航、回到顶部按钮。

粘性定位（sticky）：

结合了relative和fixed的特性：滚动前表现为relative（占据原位置），当元素滚动到触发阈值（如top:0）时，表现为fixed（固定在视口指定位置）；

注意：父元素不能设置overflow:hidden（会破坏粘性定位的触发条件），且必须设置top/bottom/left/right中的一个才会生效。

5.如何实现CSS响应式设计？常用的响应式单位有哪些？

答案：

核心思路是“根据不同设备尺寸适配样式”，常用实现方案：

媒体查询（@media）：根据屏幕宽度/高度/分辨率等条件，编写不