CSS个人整理面经.pdf

CSS⾯经

●层叠相关概念，上下⽂、等级、顺序

○z-index熟悉⽣效元素，定位元素，position属性且值不为static的元素。

○层叠上下⽂，

■HTML中三维概念，盒模型是三维，元素沿x、y轴平铺，表示层叠的z轴。元素覆盖现象。

■⼀个元素是层叠上下⽂元素，在z轴上更⾼。

■如何产⽣层叠上下⽂

●HTML中的根元素html/html本身j就具有层叠上下⽂，称为“根层叠上下

⽂”。

●普通元素设置position属性为⾮static值并设置z-index属性为具体数值，

产⽣层叠上下⽂。

●CSS3中的新属性也可以产⽣层叠上下⽂。

○⽗元素的display属性值为flex|inline-flex，⼦元素z-index属性值

不为auto的时候，⼦元素为层叠上下⽂元素；

○元素的opacity属性值不是1；

○元素的transform属性值不是none；

○元素mix-blend-mode属性值不是normal`；

○元素的filter属性值不是none；

○元素的isolation属性值是isolate；

○will-change指定的属性值为上⾯任意⼀个；

○元素的-webkit-overflow-scrolling属性值设置为touch。

■案例

●2个div，第⼀个包含2个p标签，第⼆个包含⼀个p标签。

●div都没有开启position和z-index，3个p都设置z-index和position，

○由于两个div都没有产⽣层叠上下⽂，3个p都处于根层叠上下⽂，z-index值决定

上下顺序。

●全部开启，两个div在根层叠上下⽂，若第⼀个更⾼，则两个p都恒在第⼆个div中的p上

⾯，内部两个p的上下再决定。

○层叠等级

■在同⼀个层叠上下⽂中，它描述定义的是该层叠上下⽂中的层叠上下⽂元素在Z轴上的上

下顺序。

1

■在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。

■z-index:0开启层叠上下⽂，auto没有开启层叠上下⽂。

○结合

■普通元素的层叠等级优先由其所在的层叠上下⽂决定。

■层叠等级的⽐较只有在当前层叠上下⽂元素中才有意义。不同层叠上下⽂中⽐较层叠等级是没有

意义的。

○层叠顺序

■表示元素发⽣层叠时按照特定的顺序规则在Z轴上垂直显示。

■规则，最上⾯z-inde0，然后取值auto/0，然后inline/inline-block⽔平盒⼦，然后float

浮动盒⼦，然后block块级⽔平盒⼦，然后z-index0，最后背景和边框。

■层叠顺序相同，则DOM结构后⾯的覆盖前⾯的元素。

○如何产⽣层叠上下⽂

■HTML中的根元素html/html本身j就具有层叠上下⽂，称为“根层叠上下⽂”。

■普通元素设置position属性为⾮static值并设置z-index属性为具体数值，产⽣

层叠上下⽂。

■CSS3中的新属性也可以产⽣层叠上下⽂。

○z轴堆叠顺序判断，由两个元素的z-index值⼤⼩、层叠上下⽂、层叠等级共同决定。

●position属