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;
待续...