css3的一些用到的新属性收集（持续更新）

一、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等属性即可没什么特别的，

　　appearance: none;

      -moz-appearance: none;

      -webkit-appearance: none;     此属性可去除右侧向下的小箭头。

七、修改滚动条的样式

　　核心的属性

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb  滚动条里面的小方块
• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

　　注意首先需要先设置::-webkit-scrollbar属性，不然设置其他属性都是无效的。