CSS – Reset CSS / Base CSS

前言

许多 element tag 都有自带的 style.

比如 h1 默认 font-size 是 2 em

anchor 默认颜色是 blue

大部分默认 style 并不会是开发人员期望的效果. 所以就有了 reset css 的概念.

而开发人员期望的效果就诞生了 base css. 简单说就是我们希望有 default style, 但是这个 style 必须符合我们自己的设计. 而不是游览器那种丑陋的设计.

Bootstrap & Tailwind CSS

使用 Bootstrap 或者 Tailwinds CSS 可以很轻松的享有这一次.

但如果你不想引入它们, 那就需要一个一个去 setup 了.

常见的 Reset & Base:

1. margin, padding, box-sizing

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

很多 tag 都有自带的 margin 和 padding. 一律清楚.

游览器默认都是 content box, 但是大部分开发人员都习惯用 border-box.

2. anchor

a {
  color: inherit;
  text-decoration: inherit;
}

3. img

img {
  max-width: 100%;
  display: block;
}

img 默认的 width 是依据图片的尺寸, 通常不会是我们期望的. 期望的是图片被压缩到设计好的框里.

display: block 可以解决 <img> extra 4px at the bottom 的问题.

4. ul, ol

ul,
ol {
  list-style: none;
}

默认的点, 号码也是开发人员不喜欢的.

5. heading

h1,h2,h3,h4,h5,h6 {
  font-weight: inherit;
}

heading 默认的 font-weight 都是 bold.

6. button

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
}

button {
  border-width: 0;
  cursor: pointer;
  background-color: transparent;
}

button 的 font-size 默认是 13.3333px, 而且自带背景色....

7. border-width

许多 element 都自带 border, 比如 iframe, input, button. 很烦

Tailwind CSS 会把所以 element 的 border-width set to zero

查看 Tailwind CSS 的 Reset CSS

去 playground 写一个 <button> element

ctrl + shift + c 点击 button, 开启 DevTools 后就可以查看了