css备忘

1.0 禁止换行

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;  /* 使用省略号来代表被修剪的文本 */


2.0 CSS通过索引的方式选择元素

div:nth-child(1){

}


3.0 CSS阴影

box-shadow: 3px 1px 12px 1px #c5c5c5;


4.0 flex下 overflow:auto 失效

如下,需要将height设为0,否则div内容无法滚动;

div{
   display:flex;
   flex-direction:column;
   flex-grow1;
   overflow:auto;
   height0px;  /* 解决flex下scroll无法滚动的问题 */
}

原因:因为flex元素默认是没有宽、高的,其宽、高默认由子元素撑开,因此无法滚动。


5.0 不要在table中使用flex,否则可能产生各种无法预测的样式异常


6.0 精确路径的类样式比单独的类样式优化级高

如下:.a>.b 中的样式优先级要比 .b 中的优先级高;除非在 .b 中使用 !important ,否则无法覆盖 .a>.b 中的样式

.a>.b{
  display:none;
}
.b{
  display:flex;
  /* display:flex !important; */
}






举报

© 著作权归作者所有


1