css盲点

以下纯属个人知识扫盲，记录下笔记

1、子元素设置display:inline-block时,彼此之间会出现一条细小的缝隙，解决办法：父元素设置font-size:0；就可消除缝隙了

2、能不用动画就不用动画animation,动画比较消耗性能，而且IE10以下不支持这个属性；尽可能用transition来代替，比如transition:transform .6s ease;transform:translateY(100px);

3、关于ie下，自动为img标签添加width和height，并且值都是图片的实际大小值，解决办法，样式设置：width:auto;height:auto;

4、能用样式写的就不要去写jq

5、突然发现这个很好用，对齐方式 vertical-align: top;

6、多行省略，一直记不住，对ie兼容不好

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;

7、修改滚动条样式

/*滚动条样式*/
.common-block .search-block .search-content .search-content-items::-webkit-scrollbar
 {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
}
.common-block .search-block .search-content .search-content-items::-webkit-scrollbar-thumb
{/*滚动条里面小方块*/
    border-radius: 5px;
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background: #e6e7e8;
}
.common-block .search-block .search-content .search-content-items::-webkit-scrollbar-track
 {/*滚动条里面轨道*/
    border-radius: 0;
    background: #fff;
}
8、设置光标的颜色  caret-color:#0078ff;

待续...

猜你喜欢