css和前端UI框架设计ElementUI

　　css的核心是box model, 也就是盒子模。可以简单理解为三个框，包含一个content,最外边的margin和内层的conent比较特殊。

　　如图所示，可以清晰的看到其四部分。其margin（外边距）, padding（内边距)都没有颜色信息，只有边距大小。background-color会包含padding和content，width限定的是content大小。

　　css还有一个核心的概念就是选择器，比如我们常用的class(符号.)，id(符号#)等属性，都是用于选择,通常一般会用class，应为id只能关联一个样式，class可以有多个。

　　导入css文件的流行方式：

<style>
    @import url(style.css);
</style>

　　

　　UI框架的基础就是CSS和文件，比如优秀的ElementUI。最有效，简单的学习方法就是从一个简单的组件开始，然后以点带面，学会其他组件的使用。

　　比如分页，这个是很多网也都要有的界面。自己手写分页的组件就太难了，还是用组件块。分页组件的文档地址：https://element.eleme.cn/2.0/#/zh-CN/component/pagination。首先，就像我们买衣服一样，我们喜欢什么样的样式，就可以选取，就是复制下面的模板代码。但是我们还得更加我们的数据，配置相关的参数。然后我们就可以使用了。

ElementUI文档地址：https://element.eleme.cn/2.0

参考文档：https://www.cnblogs.com/niujifei/p/11193140.html