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

前言

在我们刚开始学习绘制页面的时候，想必都是直接拿着设计稿通过HTML，css就开始画了，其实这样是不对的。

首先我们应该对着设计稿进行整体的构思，观察并发现其中一些共通的地方或要点，思路捋清楚之后，再进行相应代码的编写，这样很大程度上能提高我们的工作效率。

抽出可复用的公共样式

• 首先我们应该分析设计稿观察有没有一些我们可以复用的样式。这也就是我们之前说到的base层。

• 引入你所需要的组件库，比如Element，Antd等，根据你的设计稿可以在相应UI库的基础上进行相应的修改。

• 一般上我们可以先通过在最外层的html标签上，添加一些基础公用属性。

html {
  background-color: #eee; // 设置默认的背景色
  color: #333; // 设置默认的字体颜色
}

• 还有根据自己的设计稿，设置默认的p标签行高

p{
  margin: 0;
  line-height: 1.5;
}

• img标签的处理，通过vertical-align：middle可以对图片的空隙进行相应的处理。

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

需要注意的是，这些样式是全局的，作用的是所有页面中相应的标签。

好，今天就到这里了，今天努力的你依然是最棒的。Bye！！！