图片整合，精灵图，雪碧图:
什么是图片整合：
1.把小的图片整合到一个大的图片上
为什么要图片整合：
优点：
较少对服务器的请求次数
减少图片的内存
增加页面的加载速度
缺点：
整合过程麻烦
使用过程中适应性较差
定位繁琐
可维护性差
怎么使用图片整合：
通过background-position实现背景图定位技术
制作图片整合原则：
1.边切图边整合
2.单张图片的大大小不能超过200K
3.小图标周围留有足够的空间
4.背景透明，格式是.png/.gif
5.避免使用right和bottom，使用具体数值
6.为了方便计算把图的位置整合为整数倍
7.分类整合
PS填充前景色：ALT+del
PS填充背景色：CTRL+del
定位：
什么是定位：
指定一个元素在网页上的位置
定位作用：
实现层叠布局；
让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置；
定位属性：position:;
定位的属性值：
无特殊定位static
相对定位 relative
绝对定位 absolute
固定定位 fixed
粘性定位 sticky
定位的偏移量：
设置元素定位的偏移量：
left:value;
right:value;
top:value;
bottom:value;
说明：
1.属性值数值型，px/%
2.必须结合定位属性去使用，单独使用无效
3.top和bottom同时使用优先识别top
4.left和right同时使用优先识别left
5.特殊情况下，top，bottom，left，right可以同时生效
设置定位元素的层级属性
设置定位元素的层级属性：z-index:;
number 数值不加单位，默认值为0；值越大层级越高，支持负值；
auto 默认值0
说明：
1.默认是，定位元素的层级根据html书写顺序显示，先写层级低，后写层级高；
2.必须配合定位属性使用，单独使用无效；
定位的属性值：
1.无特殊定位：static
说明：
没有定位效果，可以用来取消定位，标准流内显示
2.相对定位：relative
说明：
1.会发生层级变化
2.相对元素原来的位置进行偏移
3.相对定位元素不脱离文档流，原本位置保留，不影响页面布局，只是层级发生变化
作用：
1.想让元素相对自身所在位置发生偏移的时候
2.给绝对定位元素定义包含块
3.绝对定位：absolute
说明：
1.绝对定位对margin属性失效
2.绝对定位元素会脱离文档流，在文档流的位置不保留，后面的元素会把位置补上
3.没有添加偏移量的时候，绝对定位元素在当前位置不动，但是会脱离文档流，发生层级变化
6.默认情况下，添加偏移量之后，可视窗口的第一屏是一个大的包含块
7.自定义包含块：
必须是绝对定位元素的祖先级元素(优选父元素)
祖先级元素必须要有定位属性:relative(推荐使用)、fixed、absolute
8.多个祖先级元素都具有定位属性时，该元素相对离自己最近的祖先级元素进行定位
9.绝对定位会跟随滚动条滚动
width:max-content /** 根据最大内容显示 **/
3.固定定位：fixed
特点：
1.脱离文档流，位置不保留，后面的元素把位置补上
2.没有添加偏移量的时候，在当前位置不动
3.只对margin：auto；失效，对数值不失效
4.参照物始终是可视窗口，不跟随滚动条滚动
实现元素水平垂直居中的方法：
方法一：
position:fixed;
top:50%;
left:50%;
margin-top:-(height/2)px;
margin-left:-(width/2)px;
方法二：
特殊情况1
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
特殊情况2：
绝对定位和固定定位可以设置元素的大小
特殊情况3:实现自适应两栏布局
固定定位和绝对定位的特点：
1.参照物不同：
固定定位的参照物是可视窗口
绝对定位的参照物是包含块，默认时是可视窗口的第一屏
2.是否跟随滚动条滚动：
固定定位不跟随滚动条滚动
绝对定位跟随滚动条滚动
4.粘性定位：sticky
C3新增的定位模式
特点：
1.在可视窗口范围内时，显示的是无定位的效果，超出屏幕窗口的时候显示为固定定位的效果
