1.1 开发前的准备工作
1.配置开发环境 sublime webstorm vscode Hbuilder atom
2.建立项目文件夹 为了将与项目相关的文件放在一块，便于管理和以后的维护
包括与项目相关的一些文件
主页或是首页 index.html default.html
Css文件夹 css文件的
Base.css global.css
Images文件夹 用来放置网站中的所有的图片
Js文件
音频或是视频文件
3. 样式初始化
我们的结构中的标签都有默认的样式，在各个浏览器中的显示有可能不尽不同 ，为了保证网站风格的统一或是为了便于我们的开发或是维护，需要将所有的标签 原来的样式清掉，变成统一的样式风格，以便于我们的网站布局。
4. 分析网站构成
做网站的时候也有一个规范或是通例
布局的顺序一般是从上到下，从左到右
在写页面的时候，一般考虑使用标准流的元素，其次才使用浮动或是定位。
就在标准流元素当中，宽高是最稳定的，其实才使用padding,最后或者可以使用margin.
标准流： 一般像Div,p这样的块级元素，自己独占一行，像span,a这样的行内元素或是img，input这样的行内块元素，可以一行显示多个，我们把这样的显示方式叫做标准流。Normal flow
我们网站结构中的任何标签 都可以看成是一个盒模型，都可以设置宽高，只是有的元素设置了宽高之后，不起作用。
1.2 Css样式书写位置
行内式 直接写在HTML标签内
内嵌式 写在同页面的一对style标签内
<style>
input {
outline-style: none ;
}
textarea {
resize: none;
}
</style>
外链式 从外部引入到当前的页面当中 真正的实现了结构与样式相分离
<head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/base.css"/> </head>
导入式 @
1.3 网站的快捷图标
如何制作网站快捷图标
<link rel="shortcut icon" href="/favicon.ico" />
如果快捷图标在项目文件夹的根目录下的话，一定不要带/
1.4 项目文件夹的根目录
就是打开项目文件夹的第一层，或是index.html所在的文件夹
1.5 火狐截图
1.6 通栏
通栏就是铺满整个屏幕，而面积不到整个页面的一半。
1.7 版心
因为我们的屏蔽设备的分辨率不一样吧，因此 显示网站的风格有可能不一样的，为了提高用户的体验，将网站的显示风格统一起来，因此需要给网站设置一个版心。
概念：
所谓版心也就是页面中主要内容所在的区域，即页面正中的位置。
1.8 FW快捷键
I 滴管工具 吸取颜色
K 切片工具 量取元素的宽度
Z 放大镜工具
V 移动
A 指针工具
1.9 小标签 一般起一些装饰性的作用
i s em u del ins
1.10 Font 复合属性
Font-weight: bold 700 300 500
Font-size/行高: 字体的大小/行高
Font-family: 字体的样式
Font-style: 字体的风格
Ctrl+0 将浏览器恢复成默认的原始状态
1.11 元素的实例化
就是给元素设置宽高之后，再给一个背景色或是边框，让此元素直观的显示出来。
1.12 元素之间的转换
让行内元素设置宽高之后起作用：
转成块级元素或是行内块元素
让此元素拥有定位(绝对定位或是固定定位)
浮动也可以让行内元素拥有宽度
1.13 Webstorm快捷键
Ctrl+alt+l 格式化代码(让代码对齐)
Ctrl+d 复制当前行的代码到下一行
1.14 子绝父相
子元素是绝对定位的时候，父元素是一个相对定位，那么 父级元素是给子元素设置范围的作用
如果三个元素之间的嵌套的话，就不一定非得是子绝父相，子绝父绝爷相。
定位首先是先找离自己最近的父级元素进行的一个定位，如果父级元素没有定位或是相对定位的话，默认是以浏览器或是文档的左上角为准，如果父级元素有相对定位或是绝对定位的时候，以父级元素的左上角为准。
1.15 权重的问题
标签 类 id 行内 ！important
1 10 100 1000 无穷大