盒模型

box-sizing 属性指定了 CSS 如何工作. 它会改变宽 width,高 height,内边距 padding,边框 border, 和外边距 margin这些属性的计算方式。

box-sizing 的默认值是 content-box 我更喜欢把它改成 border-box，因为这让我定义 padding 和 width会更简单。

有关 Box Sizing 的更多信息，你可能对“Understanding Box sizing”感兴趣。

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

移除内外边距

浏览器会为不同的元素设置不同的外边距和内边距。当我不需要时，这些默认设置会让我很不爽。我在编码时更喜欢自己手动设置所有的外边距和内边距。

/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

列表

我在很多情况下都会用到无序列表，并且大多数时候下我都不需要 disc 样式。因此我会设置 list-style 为 none。当需要 disc 样式的地方，再手动把它设置在特定的 <ul> 标签上。

/* Removes discs from ul */
ul {
  list-style: none;
}

表单和按钮

浏览器不会继承表单和按钮的排版样式。它会设置字体为 400 11px system-ui。我觉得这样有些迷惑且怪异，我总会手动让它们从父元素继承这些样式。

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

我对按钮的样式还做了一些调整：

设置按钮的内边距为 0.75em 和 1em，根据我的经验，这是比较合理的默认设置
清除按钮上默认的 border-radius 样式
强制背景色为透明

button {
  border-radius: 0; 
  padding: 0.75em 1em;
  background-color: transparent;
}

最后，我会给按钮内的元素设置 pointer-events: none。这主要是为了 JavaScript 交互。

（当用户点击按钮内的某个元素时，event.target 就是点击的那个元素，而不是按钮。这个样式在按钮内有 HTML 元素时会更方便处理 click 事件。

button * {
  pointer-events: none;
}

包括图像、视频、对象、iframe 和embed 在内的媒体元素。我倾向于让这些元素适应父容器的宽度。

我还会将这些元素设置为 display: block，因为 inline-block 在元素底部创建了不必要的空格。

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}

表格

我很少用到表格，但有时它们也很有用。这是我设置的默认样式：

table {
  table-layout: fixed;
  width: 100%;
}

当元素具有 hidden 属性时，它们应该从视图中隐藏。 Normalize.css 已经为我们做了这件事。

[hidden] {
  display: none;
}

这个样式的问题是它的优先级较低。

我经常将 hidden 添加到我用类选择器设置样式的元素上。类选择器的优先级高于属性选择器，display: none 属性就不起作用了。

这就是为什么我要用 !important 来提高 [hidden] 的优先级。

[hidden] {
  display: none !important;
}

禁用 js 脚本

如果一个组件需要 JavaScript 才能正常工作，我会添加一个 <noscript> 标签让用户知道（他们禁用了 JavaScript）。

这会为 <noscript> 标签创建默认的样式。

/* noscript styles */
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}

结束语

每个人开始项目都略有不同。可以随意使用我提到的这些样式。这是我个人 CSS Resets 的 Github 仓库。

你有什么建议可以帮助改进这个 CSS 重置文件吗？如果有的话，请随时与我联系！

感谢阅读。这篇文章对你有是否有帮助？如果是，希望你可以[分享](twitter.com/share?text=… CSS reset by @zellwk 👇 &url=zellwk.com/blog/css-re… 你可能会帮助别人。非常感谢！

使用我最爱的CSS resets 来定制我的网站

盒模型

移除内外边距

列表

表单和按钮

表格

禁用 js 脚本

结束语