在完成整个实例过程中遇到的知识点，可能会出现知识点比较跳跃，后面在做知识点的归整。
1. 开发前的准备工作
1.1 熟悉开发环境
常用的开发环境：sublime，webstorm，vscode，Hbuilder，atom等（我现在学习期间使用的是webstorm）
1.2 建立项目文件夹包括与项目相关的文件
1.2.1 主页或是首页：index.html或default.html
1.2.2css文件夹：存放stylesheet文件，常命名为base.css或global.css
1.2.3images文件夹：存放网站需要的所有的图片、精灵图等
1.2.4js文件夹：存放JavaScript文件
1.2.5其他音频或视频文件等
目的：为了将与项目有关的文件存放在一起，便于管理和以后的维护。
1.3 网站样式初始化
标签的默认样式，在各个浏览器中的显示有可能不同 ，为了用户感受，在不同浏览器显示相同的风格，需要将所有的标签原来的样式清掉，变成统一的样式风格，以便于网站的整体布局。
1.4 分析网站构成
布局的顺序一般是从上到下，从左到右。在写页面的时候，一般优先考虑使用标准流的元素，其次才使用浮动或是定位。在标准流元素当中，宽高是最稳定的，其次才是使用padding，最后可以使用margin。
2. CSS样式书写位置
2.1 行内式
直接书写在html标签内
2.2 内嵌式
写在同一个页面head部分的style标签中
如：
<style>
input {
outline-style: none ;
}
textarea {
resize: none;
}
</style>
2.3 外链式
从外部引入到当前的页面当中，真正实现了结构和样式的分离。
如：
<link rel="stylesheet" href="css/base.css"/>
2.4 导入式
@实现，基本不使用。
3. 网站的快捷图标
每个网站的选项卡栏中都有各自的网站图标，常使用<link rel="shortcut icon" href="/favicon.ico" />来进行调用。
4. 通栏
通栏就是铺满整个屏幕，宽带为自适应每个浏览器的宽度。
5. 版心
所谓版心也就是页面中主要内容所在的区域，即页面正中的位置。
因为每台设备的分辨率不一致，因此显示网站的风格有可能不一样的，为了提高用户的体验，将网站的显示风格统一起来，因此需要给网站主要内容设置一个版心。
6. font复合属性
font-weight：设置文字的粗细；
font-size/行高：设置位置的尺寸/行高；
font-style：设置文字倾斜；
font-family：设置文字的字体。
7. 元素的实例化
就是给元素设置宽高之后，再给一个背景色或是边框，让此元素直观的显示出来。
8. 元素之间的转换
8.1 display
给元素设置display属性可以将元素转换成块级、行内块或行内元素。
8.2 定位
给元素设置定位（绝对定位或者固定定位），可以将元素转换成行内块元素。
8.3 浮动
给元素设置浮动，也可以将元素转换成行内块元素。
9. 定位问题
在发生嵌套时，需给子元素设置一个相对父元素位置的定位时，一般子元素设置绝对定位，父元素设置相对定位。
10.权重的问题
各类型的选择器的权重：
继承 < 类 < id < 行内 < !important
实例完成情况：
