type
status
date
slug
summary
tags
category
icon
password
1 定位
1.1 相对定位
① 如何设置相对定位
② 相对定位元素定位的参考点
③ 相对定位元素的特点
1.2 绝对定位
① 如何设置绝对定位
② 绝对定位元素定位的参考点
③ 绝对定位元素的特点
1.3 固定定位
① 如何设置为固定定位
② 固定定位的元素定位参考点
③ 固定定位元素的特点（同绝对定位）
1.4 定位显示层级 z-index
1.5 定位相关 CSS 属性
CSS 属性名 | 功能 | 属性值 |
position | 设置定位 | static：不定位，默认值。
relative：相对定位。
absolute：绝对定位。
fixed：固定定位 |
left | 与参照点左侧距离 | 长度 |
right | 与参照点右侧距离 | 长度 |
top | 与参照点上侧距离 | 长度 |
bottom | 与参照点下侧距离 | 长度 |
z-index | 显示层级 | 纯数字 |
1.6 定位元素（绝对和固定）的默认宽高计算规则
1.7 设置定位元素（绝对和固定）在包含块中水平垂直都居中
方案一：
方案二：
2 精灵图
2.1 什么是精灵图
把小的图片合并到一张大的图片上
多个元素使用相同的图片作为背景图像，但是设置不同的图像位置，实现各自元素显示的图案不同
2.2 精灵图的优点
减少图片的请求次数，提高网页加载速度。
2.3 制作精灵图在线工具
3 页面布局
3.1 页面的组成部分
3.2 重置样式表
3.3 版心 container
3.4 编码规范
3.5 网站标题图标
① favicon 图标的使用
使用方法一：把 ico 图标文件命名为
favicon.ico ,放在网站根目录下，网页会自动获取 ico 图标。使用方法二：在网页中使用 link 标签自行引入 ico 文件。
② favicon 图标的制作
- 在线工具 http://www.ico51.cn/
- 作者:昕昕丶未来不是梦
- 链接:https://pisce.buzz/article/web01_ymbj_01
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。