你未必知道的49个CSS知识点--（转发地址）

https://juejin.im/post/5d3eca78e51d4561cb5dde12#heading-28

 

 1. 另类调整文字层级方法 : 设置 transform  层级提升, 与父级同时设置transform 会使fixed失效

2. nth-of-type : 匹配属于父元素的特定类型的第 N 个子元素的每个元素

3.pointer-events: none;  点击穿透

4.white-space: break-spaces;  文本换行

5.object-fit: cover; 对图片进行剪切，保留原始比例：

6.问题:   一般需要滚动条时 , 都是在外层添加父级, 再将外层添加的父级设置样式overflow:scroll; 从而实现元素溢出出现滚动条

解决: 无需额外添加滚动容器的做法 :   父级ul  设置样式display:flex;overflow:scroll; 子级li 设置样式flex:none; 

7.z-index失效

　　1.元素浮动导致失效

　　2.元素没有定位(static除外)

　　3.父标签 position属性为relative；

解决办法: 父标签 position属性为relative时 父级标签加上z-index:auto;

 

8.字体文件引入以及使用

@font-face{
    font-family: 'font1';
    src:url("../fonts/font1.ttf") format('truetype');
}
@font-face{
    font-family: 'font2';
    src:url("../fonts/font2.ttf") format('truetype');
}
.f1{
    font-family: 'font1';
}
.f2{
    font-family: 'font2';
}

9.多行文本左右对齐

text-align: justify;

10.可编辑元素，文本为空时展示

:empty::before {
     content: '请输入纠正文本';
     color: #999;
     position: absolute;
}

 11.文字换行失效？

　　解决：

 white-space: pre-wrap;
 word-wrap: break-word;

  word-break: break-all; //强制换行

 

 12.overflow: hidden;失效？

加上  position: relative;

 13.弹性盒子 父级：flex：1 父级高度自适应，子级：height：100%，子级随父级高度自适应，
子级内元素高度不固定，会将子级和父级全部撑开

要求：子级和父级高度自动占满剩余高度，而且不被子级的内容撑开

解决:

父级改为：

overflow: hidden;

flex: 1;

..