1 定位
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| positon | 设置定位 |
static：不定位，默认值 relative：相对定位 absolute：绝对定位 fixed：固定定位 |
| left | 距离参考点左边距离 | 长度 |
| right | 距离参考点右边距离 | 长度 |
| top | 距离参考点上边距离 | 长度 |
| bottom | 距离参考点下边距离 | 长度 |
| z-index | 设置显示层级 | 数字（正负值） |
1.1 相对定位
① 如何设置相对定位：
position:relative;
② 相对定位元素定位的参考点
该元素原来在文档流中的位置。
③ 相对定位元素的特点
1、相对定位元素不会脱离文档流，故其他元素排列显示时，仍然参照该相对定位元素原来的位置。
2、元素设置了相对定位后，不改变原来的显示模式；相对定位也可与浮动同时设置。
3、相对定位通常用于配合绝对定位使用，想让谁作为绝对定位元素的包含块，就给谁设置相对定位。
1.2 绝对定位
① 如何设置绝对定位
position:absolute;
② 绝对定位元素定位的参考点
该绝对定位元素的包含块。
绝对定位元素的包含块：是第一个定位（任何定位都可以）的祖先元素，如果祖先元素都没有定位，就是整个页面。
没有定位的元素的包含块：其父元素
③ 绝对定位元素的特点
1、绝对定位的元素会脱离文档流，相邻元素或其父元素在文档流中会忽略其存在。
2、绝对定位的元素可以完美设置4个方向的内外边距，但其默认宽高不再参照父元素，而是被自身内容撑开。
3、不论元素原来是行内、行内块、块级以及浮动元素，设置了绝对定位之后，不再保持原来的显示模式，而是按照绝对定位元素的特点显示。
4、给多个兄弟元素同时设置绝对定位，会重叠，最后一个兄弟元素在最上面。
1.3 固定定位
① 如何设置固定定位
position:fixed;
② 固定定位元素定位的参考点
视口
固定定位的包含块是视口，与祖先元素是否定位无关。
③ 固定定位元素的特点（同绝对定位）
1. 固定定位的元素脱离文档流， 相邻的元素或父元素在文档流中会忽略其存在。
2. 固定定位的元素，默认宽高被自身内容撑开，可以完美设置4个方向内外边距。
3. 不论元素原来是行内、行内块、块级以及浮动元素，设置了固定定位之后，就按照固定定位元素的特点。
1.4 定位层级
- 默认情况下，定位元素的显示在不定位元素的上面；相对定位、绝对定位、固定定位层级相同，各定位元素之间，后面的元素显示在前面的元素上面。
- 使用
z-index可以设置定位元素的显示层级，只有定位的元素设置z-index才能生效。 - z-index 的值为数字，数字越大显示层级越高，若为负数，显示层级会低于不定位的元素。
- 在实际中，如果发现元素a的显示层级>元素b，但页面显示元素a在元素b之下，检查是否元素a的父元素的显示层级<元素b。解决办法：更改或去掉元素a的父元素的显示层级设置。
1.5 定位的特殊应用
① 定位元素的默认宽度计算
- 定位元素如果设置了宽度，则不要同时设置
left和right； - 定位元素如果设置了高度，则不要同时设置
top和bottom，否则会冲突； - 定义元素如果没有设置宽度，可以利用同时设置
left和right，调整元素默认宽度的计算，高度同理。
② 设置定位元素在包含块中水平垂直都居中
-
方案一：给定位的元素进行设置
position:absolute; left:50%; top:50%; margin-left:-宽度/2; margin-top:-高度/2; -
方案二：给定位的元素进行设置
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;
2 精灵图
2.1 什么是精灵图
CSS Sprites：精灵图或雪碧图，是一种背景图片的应用处理方式。将很多小图片合并到一张大图中，把整个大图作为背景图，通过 background-position 属性将合适的图片显示到元素上。
2.2 精灵图的优点
多个元素使用的同一张背景图像，图片只需下载一次，减少请求服务器的次数。
2.3 精灵图在线制作工具
https://alloyteam.github.io/gopng/
2.4 background-position设置位置的三种方式
-
使用关键字：
background-position: left top; background-position: right;/* right center */ background-position: top;/* center top */ -
通过长度设置图像左上角在元素上的坐标：
background-position: 100px 20px; background-position: 20px; /* 20px center */ -
使用百分比设置背景图像位置：
background-position: 30% 30%; /* 背景图像上 30%，30%的点 与 元素上 30%，30% 的点重合 */
3 页面布局
3.1 样式重置
开发页面前，通常要重置元素的默认样式，以免在设置样式时造成不必要的麻烦。
重置方式：
1、全局选择器：适合平时练习使用
2、reset.css：将元素的默认样式归零
3、normalize.css：解决不同浏览器样式不一致的问题，并未真正重置默认样式，只是重新设置了一下。
3.2 版心
页面中主要内容所在的区域，一般用类名.container表示。
4 favicon 图标
浏览器网页标题前的小图标，一般为.ico格式，命名为favicon.ico。
4.1 设置方法
用link标签设置在title中：
<link rel="shortcut icon" href="favicon图标地址">
