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 可以解决  的问题.

4. ul, ol

ul,
ol {
  list-style: none;
}

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