一、img的object-fit属性
我们在项目中插入图片的时候一般就2种方式，1.是用img标签；2.是用background中background-image
在使用background时，可以用background-size来设置图片的显示方式，比较方便。
在用img标签时，后台获取的图片尺寸也大小不一时，想单纯通过设置宽高两个属性就很难达到预期的效果，图片总会有变形，过度拉伸等问题，影响美观
最近发现了img的object-fit属性能够解决这个问题
<img class="test" src="test.png">
.test{ 160px; height:90px; object-fit:cover; }
直接给img标签加上就可以，注意一定要设置图片的宽高，否则这个属性是无效的
object-fit有以下几个属性
1.object-fit:fill
元素框被整个填满，如果图片的宽高比例不合适会被拉伸
2.object-fit：contain
图片按其自身比例缩放以适应元素框，如果宽高比与元素框不匹配，会留有空隙
3.object-fit：cover
图片按其自身比例缩放至填充满整个元素框，如果比例不匹配，图片会被裁剪
4.object-fit：none
图片已原有尺寸放入元素框中
5.object-fit：scale-down
内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
二、当元素自身的z-index不起作用时，有可能是因为如下几种情况
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。（标签已脱离了文档流）
4、问题标签的祖先标签的z-index值比较小
相应的解决办法
第1种: position:relative改为position:absolute；
第2种:浮动元素添加position属性（如relative，absolute等）；
第3种:去除浮动。
第4种:提高父标签的z-index值
三、css样式可动态变化宽高
calc(100% - 640px)
四、取消双击选中的默认事件
user-select:none;
五、点击穿透属性
pointer-events
值分别为auto和none。 当使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。
六、修改select的默认样式
说是修改默认样式其实只是去掉右侧向下的小箭头而已，剩下的边框背景之类的属性想修改的话就用border等属性即可没什么特别的，
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块
- ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
注意首先需要先设置::-webkit-scrollbar属性，不然设置其他属性都是无效的。