小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

其实总的来说，Base层是分为两层。一层是Generic层，另一层就是Base层。

之前我们也说到过，Generic层是通过引入normalize.css,重置浏览器默认样式。

而Base层呢，是在重置浏览器默认样式的基础上，对各类元素的重置样式进行补充。

Base层

Generic我们就不多赘述了。
在项目中，我们可以根据我们的需求，来定制化我们的Base层。比如说像链接的样式。我们就可以统一的修改，放在Base层中。

a {
  color: $color-text-primary;
  text-decoration: none;
}

亦或者图片的样式。

img {
  width: 100%;
  vertical-align: middle;
}

表单的样式。

input {
  padding: 0;
  outline: none;
  border: none;
}

当然还有字体的样式等等。

@font-face {
  font-family: 'siyuan';
  src: url('~@/style/base/fonts/siyuan/siyuan.eot');
  src:
    url('~@/style/base/fonts/siyuan/siyuan.eot?#font-spider') format('embedded-opentype'),
    url('~@/style/base/fonts/siyuan/siyuan.woff') format('woff'),
    url('~@/style/base/fonts/siyuan/siyuan.ttf') format('truetype'),
    url('~@/style/base/fonts/siyuan/siyuan.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'feichi';
  src: url('~@/style/base/fonts/feichi/feichi.eot');
  src:
    url('~@/style/base/fonts/feichi/feichi.eot?#font-spider') format('embedded-opentype'),
    url('~@/style/base/fonts/feichi/feichi.woff') format('woff'),
    url('~@/style/base/fonts/feichi/feichi.ttf') format('truetype'),
    url('~@/style/base/fonts/feichi/feichi.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tuzi';
  src: url('~@/style/base/fonts/tuzi/tuzi.eot');
  src:
    url('~@/style/base/fonts/tuzi/tuzi.eot?#font-spider') format('embedded-opentype'),
    url('~@/style/base/fonts/tuzi/tuzi.woff') format('woff'),
    url('~@/style/base/fonts/tuzi/tuzi.ttf') format('truetype'),
    url('~@/style/base/fonts/tuzi/tuzi.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

好了，今天就到这里了，see you！！！

CSS架构之Base层

前言

Base层