CSS 小技巧 & 滚动条样式更改

1.使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：

*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

现在元素的 margin 和padding 已为0，box-sizing可以管理您的CSS盒模型布局。
注意：如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。

2.继承 box-sizing

从 html 元素继承box-sizing ：

html {
 box-sizing: border-box;
}
 
*,
*::before,
*::after {
 box-sizing: inherit;
}

如此在插件或其它组件里改变 box-sizing 变得简单。

3.使用unset而不是重置所有属性

重置元素的属性时，不需要重置每个单独的属性：

button {
 background: none;
 border: none;
 color: inherit;
 font: inherit;
 outline: none;
 padding: 0;
}

你可以用all简写來指定所有元素的属性。 将该值设置为unset会将元素的属性更改为其初始值：

button {
 all: unset;
}

注意： 所有速记在IE11中不被支持，目前正在考虑Edge的支持。 IE11不支持unset。

4.使用 :not() 选择器来决定表单是否显示边框

先为元素添加边框

/* 添加边框 */
.nav li {
 border-right: 1px solid #666;
}
为最后一个元素去除边框
/* 去掉边框 */
.nav li:last-child {
  border-right:none;
}

不过不要这么做，使用 :not() 伪类来达到同样的效果：

.nav li:not(:last-child) {
 border-right: 1px solid #666;
}

当然，你也可以使用 .nav li + li，但是 :not() 更加清晰，具有可读性。

5.为 body 元素添加行高

不必为每一个 <p>，<h*>元素逐一添加 line-height，直接添加到 body 元素：

body {
 line-height: 1.5;