css设置时需要注意的一些细节

Posted 2022-10-17 赏花赏景赏时光

1、z-index

1）z-index的作用：设置堆叠上下文，即设置元素堆叠顺序

2）z-index的值越大越排在上面吗？

答案是否定的，还要看父级的层级。

当父元素没有设置z-index时候，即父元素的z-index：auto，则子元素的层级可以和任意元素比较；值越大越排在上面

当父元素设置了z-index，则子元素会继承父元素的层级，子元素只能和同级相邻兄弟比较z-idnex；父元素和其同级相邻兄弟比较层级

3）z-index的取值范围：不同浏览器的取值范围不一样，可以取负数，默认值为auto表示不会创建一个新的本地堆叠上下文，下图是一些版本浏览器的数据：

 

 4）z-index生效条件：当position不是static时候生效，即position为relative/absolute/fixed等时候才会生效

5）z-index设置为0和不设置的区别：

如果不设置z-index，则z-index默认值就是auto，则该元素不处于堆叠上下文中，其子元素不会从父元素继承优先级，可以和任意元素比较z-idnex的值；

如果设置z-index=0，则该元素就会处于堆叠上下文中，该元素处于负数上面，正数下面；其子元素会继承父元素优先级

6）z-index可以设置负数吗？

当然可以。当元素设置了负数，则该元素会处于z-index=0的元素下面，同时会处于其他普通元素下面（没有堆叠的元素position:static和z-index：auto）

2、overflow：auto生效条件

设置了over-flow：auto的元素，其外层也要设置height，并且外层height值要小于设置了over-flow：auto的元素高度

3、text-overflow ：ellipsis不生效

单行文本超出显示省略号：

text-overflow:ellipsis   // 显示省略号
white-space：nowrap // 内容超出宽度，不换行
overflow: hidden // 超出部分隐藏

多行文本超出显示省略号，以两行为例：
 

text-overflow:ellipsis   // 显示省略号
overflow: hidden // 超出部分隐藏
dispay: -webkit-box  // box布局
-webkit-line-clamp: 2 // 俩行
-webkit-box-orient: vertical // 竖直方向布局