1、PRD
前端FE（front-end）图片样式是设计UI给到的PRD图片，一些比较好的设计师会给到图片标注图，根据图片上距离进行写页面
2、项目准备工作
首先看页面结构，在index.html入口文件中把结构写下来，看看有几个结构，然后再进行细分
把对应的重置样式在reset.css中把对应的标签进行重置样式
3、小经验
1）样式重置与模块化
reseat样式表，自己填写相应内容进行重置，一般一个大项目之前都会有人写好或者规定好样式重置内容，后续进行直接引用，尽量减少嵌套，这样方便网站SEO（搜索引擎优化）进行爬虫
2）line-hight不同值的区别
line-height取值：
数字、150%、1px、1em、normal，通常都是取值为数字，比如1.5，这样可以进行继承
line-height的取值一般是font-size乘以数字值，比如font-size为10px，line-height为1.5，那么实际的line-height为10x1.5=15px
font-family:'宋体'（Simsun）\微软雅黑（Miscrosoft YaHei）
3）css@规则
@charset 设置样式表的编码
比如设置@charset 'utf-8'
@import 导入其他样式文件
@meida 媒体查询
@font-face 自定义字体
4）favicon
icon是指标题上的图标样式，可以使用在线网站将img转换为ico格式图片，然后在目录中导入对应的ico图片，在head中link进来对应的图标
<link rel="icon" href="./淘.ico">
5)base标签
在head中设置的，可以设置最基本的网页导航，URL
6）自定义图标
使用自定义图标引入，阿里巴巴的iconfont
7）H标签的应用场景
搜索引擎SEO在爬虫的时候会根据标签的权重来进行区分重要程度
title是最重要的，其次是h1-h6,一个页面中h1标签只能出现一次，如果没有标题，可以在logo上使用h1
h2是副标题上使用，h3是页面板块的标题，h4使用在板块里面的标题
8）以图换字
将文字在html中写上，然后在css样式中添加background url(图片地址)
文字隐藏起来：text-index：-9999
9）怪异盒模型
盒模型分为两种;
1、标准盒模型
总宽度=border（左右）+width+padding（左右）
总高度=border（上下）+height+padding（上下）
2、IE盒模型（怪异盒模型）
总宽度=width
总高度=height
10）css3（圆角、渐变、过渡）
border-radius：圆角
渐变：background-image：linear-gradient（to right,初始颜色，结束颜色）默认是to bottom
linear-gradient：是线性渐变
transtion:过渡属性值 过渡时间
11）IE滤镜
filter：支持IE8的渐变
12）css hack
要支持IE的兼容性，专门有的
13)图片垂直居中对齐
1、display：table-cell
vertical-align:middle
把图片模拟成单元格，图片就能垂直居中对齐
2、弹性盒模型：
display：flex；
justify-content: space-around;
align-items :center;
14）css sprites
15)表格
table{border-collapse:collapse}(边框合并计算)
table-layout：fixed（定义列宽的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度）
16)图片格式webp
谷歌公司研发的图片格式，占用内存比较小，但是支持的浏览器比较少