CSS高频面试题及详细答案（实战向）.docxVIP

CSS高频面试题及详细答案（实战向）

一、CSS基础概念题

1.谈谈你对CSS层叠上下文的理解？层叠顺序规则是什么？

答案：

层叠上下文是网页中元素在Z轴方向的层级空间，简单说就是元素堆叠的“独立层级容器”。当一个元素形成层叠上下文后，它内部的所有子元素的层级堆叠，只会在这个容器内生效，不会穿透到外层页面。

形成层叠上下文的常见条件：

页面根元素html（默认自带层叠上下文）

position为relative/absolute，且z-index不为auto

position为fixed/sticky（自带层叠上下文）

opacity小于1

transform、filter、will-change等属性开启

标准层叠顺序（从低到高）：

背景和边框负z-index元素普通文档流元素浮动元素行内元素定位元素（z-index:auto/0）正z-index元素

核心要点：z-index只对定位元素生效，且必须在同一个层叠上下文内对比才有效，父元素层级低，子元素z-index再高也会被外层元素覆盖。

2.CSS选择器优先级权重规则是什么？如何计算？

答案：

CSS优先级是用来判定哪个样式最终生效的规则，采用四位权重计数法，从高到低依次对比，高位胜出则直接生效，无需对比低位。

权重等级（从高到低）：

!important：最高优先级，无权