前端常用css样式而不长记住的样式总结

字体样式

caret-color

可以去掉字体默认光标,可以用于css重置文件当中

*{
	caret-color: rgba(0,0,0,0);
}

-webkit-overflow-scrolling

属性是来控制元素在移动设备上是否有回弹的效果

auto:使用普通滚动，当手指在屏幕上离开时，滚动立即停止
touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
兼容性写法：

verflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

bug
当你给一个元素设置过position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;属性后，你会发现，滑动几次后可滚动区域会卡主，不能在滑动，这时给元素增加个z-index值就可以了。

-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;

white-space文本显示隐藏

超出文本显示加省略号,后面又加入移入效果显示:hover,看自己需要，可加可不加

设置:hover
h1{
	overflow: hidden;//溢出隐藏
	white-space: nowrap;//禁止换行
	text-overflow: ellipsis;//...
}
h1:hover{
	width:200px;
	overflow: visible;
	white-space: pre-line;
	cursor:pointer;
}

-webkit-text-size-adjust: 100%;

PC端页面文字在移动端没有等比例缩小，而是变得很大，设置

html,body{-webkit-text-size-adjust: 100%;}

推荐采用-webkit-text-size-adjust: 100%;
ps：如果要用小于12px字体时，用-webkit-transform: scale( ) 缩小到合适值。

font-smoothing

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。

  -webkit-font-smoothing: antialiased;/*chrome、safari*/
  -moz-osx-font-smoothing: grayscale;/*firefox*/

text-rendering: optimizeLegibility;

MDN解释

对文本字体渲染起作用,相当于图片使用svg,缩放兼容性非常好,一般放在重置样式文件或者app.vue里面的style全局样式里面

持续更新中~~~

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！