1、解决img 5px 间距问题

经常遇到图片底部多出5px间距的问题，这里有4种解决方案。

方案一：设置父元素字体大小为0

.img-container{
  font-size: 0;
}

方案二：将 img 元素设置为 display: block

img {
    display: block;
}

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

img{
  vertical-align: bottom;
}

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

.img-container{
  line-height: 5px;
}

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

如何使元素与窗口一样高？答案使用 height: 100vh;

3、修改 input  placeholder  样式

.placehoder-custom::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4、使用 :not 选择器

除了最后一个元素外，所有元素都需要一些样式，使用 not 选择器非常容易做到

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5、使用 flex 布局将一个元素智能地固定在底部

当内容不够时，按钮应该在页面的底部。当有足够的内容时，按钮应该跟随内容。当你遇到类似的问题时，使用 flex 来实现智能的布局。

事例地址：codepen.io/qianlong/pe…

6、使用 caret-color 来修改光标的颜色

caret-color: #ffd476;

7、删除 type="number" 末尾的箭头

默认情况下，在type="number"的末尾会出现一个小箭头，但有时我们需要将其删除。我们应该怎么做呢？

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8、outline:none 删除输入状态线

当输入框被选中时，它默认会有一条蓝色的状态线，可以通过使用 outline: none 来移除它。

如下图所示：第二个输入框被移除，第一个输入框没有被移除。

9. 解决iOS滚动条被卡住的问题

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

body,html{
  -webkit-overflow-scrolling: touch;
}

10. 绘制三角形

事例地址：codepen.io/qianlong/pe…

11. 绘制小箭头### 11. 绘制小箭头

事例地址：codepen.io/qianlong/pe…

12. 隐藏滚动条

.box-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

13、自定义选定的文本样式

.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

14、不允许选择文本

.box p:last-child {
  user-select: none;
}

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

body{
  filter: grayscale(1);
}

参考文档

mp.weixin.qq.com/s/gYbRGkvqZ…