清除浏览器的默认样式

浏览器一般带有一些默认的CSS样式，比如默认页边距等，这些莫名其妙的奇奇怪怪的属性总是会干扰我的布局，浪费开发者的大量时间。此外，还有一些属性的默认值通常并不符合要求，比如元素的box-sizing属性，我们需要将其统一设置。

我们设计页面时，一般第一件事就是把这些坑给覆盖掉。但是由于这些坑比较多，大多数总结都不太全，这篇笔记也是不断的补充中。

去掉默认页边距

body {
  margin: 0;
  padding: 0;
}

去掉某些元素的开始和结束边距

我在用ul和li制作一个右键菜单时发现了这个问题，一个<ul>元素会以绝对定位的形式，显示在鼠标点击位置。当时的情况是无论如何调整CSS，菜单都会弹出在我鼠标点击位置的偏下一点。经过检查，发现是margin-block-start这个默认样式导致的。

我们可以直接覆盖margin-block-start，或者直接指定margin。

ul {
  margin: 0;
}

修改默认的盒子模型

默认的content-box更像是一个历史遗留问题，CSS3的border-box使用起来更加直观、简单。

* {
  box-sizing: border-box;
}