CSS

box-sizing

box-sizing:
content-box：这是由CSS2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；
border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内
            进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;
inherit：规定应从父元素继承box-sizing属性的值;

font-size: 0

1、解决表格之间空隙
以ul和li为例：
最合适的方法就是给li的父级ul设置： font-size: 0;
给li设置：font-size: a px; 如此就达到了所需效果，li不设置font-size就是之间没有空格的效果。

2、解决图片之间的空隙
一样因为行内级元素的原因，图片之间会出现间隙，直接在给div标签一个font-size：0; 即可。

3、解决行内元素空隙多种方法
a、其实由display:inline-block元素之间空隙的解决办法不止设置父级font-size为0这一种。
   我们还可以设置父元素，display:table和word-spacing：
b、为inline-block元素添加样式float:left ：
   设置子元素margin值为适当的负数

letter-spacing和word-spacing

1、letter-spacing定义的是字与字之间的距离
   word-spacing控制的是字与字之间 空格的宽度 
2、word-spacing属性一般为英文准备的，因为英文书写的时候使用空格分开单词。
   所以在中文的环境下 只能使用空格隔开每一个字才能真正体现word-spacing的作用

巧用not选择器

:not(selector) 选择器匹配非指定元素/选择器的每个元素。
li:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

使用caret-color改变光标颜色

在做表单相关需求的时候，有时候需要修改一闪一闪光标的颜色。caret-color属性完美支持这个需求。
<input type="text" class="caret-color" />
.caret-color {
  caret-color: #ffd476;
}

使用filter(滤镜) 属性

body{
  filter: grayscale(1);
}