常见的css技巧

1.解决img 5px间距的问题

开发过程中经常遇到图片底部多出5px间距的问题。

解决方法：

方案1:设置父元素字体大小为0

方案2:将img元素设置为dispaly:block

方案3:将img元素设置为vertical-align:bottom

方案4:给父元素设置line-height:5px

2.元素的高度与window的高度相同

height:100vh

3.修改input palceholder样式

4 使用:not选择器 

一个li列表，除了最后一个元素，所有元素都需要加一些公共样式，这种情况使用not选择器非常方便。

 

 

 :not()也支持其他选择器，比如;nth-child()

 

5.修改光标的颜色

 

 6.删除input type='number' 末尾的箭头

默认情况下，在type='number'的末尾会出现一对上下箭头，但有时候我们需要将其删除。

方法：

7.解决ios滚动条被卡住的问题

在苹果手机上，经常发生元素在滚动时被卡住的情况。这时，可以使用css来支持弹性滚动

 

 8.使用 "filter:grayscale(1)"，使页面处于灰色模式。

9.单行文本溢出显示省略号

 

10.多行文本溢出时显示省略号

 11.不允许选择文本

12.自定义选对文本的样式