定位，堆叠，CSS精灵，过渡，光标（前端）
一.定位
1.作用
灵活改变盒子在网页中的位置
2.标签
position
3.属性值
（1）相对定位relative
relative（相对定位）-----改变位置的参照物是原来的位置，挪动后原来的位置不托标，不被占用。
要配合top，left，right等使用，表示相对原来位置挪多少。
（2）绝对定位absolute
absolute（绝对定位）：子级绝对定位，父级相对定位。----会托标，不占位置。
原来效果：
使用绝对位置后：
会托标。
加上top，left等属性美观一下：
如果把父级的相对位置去掉，则发生：span标签跑到body的右上方去了。
！！！参照物，找最近已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视位区改位置
去掉display：block效果-----行高依旧生效，说明绝对定位具有行内块特点。
总结：
绝对定位特点：
托标，不占位；
参照物，找最近已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视位区改位置；
显示模式特点改变，宽高生效（具备了行内块特点）。
二.定位居中
1.实现
这是left：50%的效果：
top：50%的效果同理，还未真正达到定位居中效果！！！
（1）修改外边距
（2）使用transform
transform: translate(-50%,-50%);
推荐使用第二中，因为第二种不用人工计算。
三.固定定位
1.作用
元素的位置在网页滚动时不会变化
2.标签
position
3.属性值
fixed
4.特点
固定定位脱标，不占位
位置需要配合使用标签top，right等-----参照物（浏览器窗口）
显示模式具备行内块特点
四.堆叠层级
1.标签
z-index: ;
属性值默认为0，属性值越大，表示显示顺序越靠上。
2.使用
先设置两个盒子
使用绝对定位产生堆叠效果，可以把蓝盒子挪到右下角，清除看见-----后来者居上-------的效果。
如果要使得box1居上，则使用z-index: 1;（默认值为0）
如果要box2（蓝盒子）压回来，则把蓝盒子z-index：2；即可。
五.定位总结
六.CSS精灵
1.实现步骤
精灵图：
先完成12，我们的目标是N字符
完成3.1：找到N字符的位置
最终显示效果：
2.案例--京东服务
京东服务精灵图
完整效果图：
（1）大体布局
（2）细化
对大盒子service和ul，li标签的狂高及转flex步骤省略，自己写。
开始放入精灵图：
先大体定位到“多”字符，然后再单独修改余下的h5标签。（其余标签与“多”字符的垂直位置相同，只需测量水平位置即可）
最后美化字体（粗细，字体大小，颜色，行高等）。
七.字体图标
展示的是图标，本质上字体。
1.作用
在网页中添加简单，颜色单一的图标
2.优点
3.使用
样式表一般由设计师提供
八.垂直对齐方式
1.标签
vertical-align
属性值：middle，left，right等；
baseline（基线对齐）----默认效果（导致图片底下有空白）
可以通过将图片改为行内块dispaly:block；
九.过渡属性
1.作用
一个元素在不同状态之间切换的过渡效果（即慢慢变化的效果）
2.标签和属性值
其中花费时间具体为xx秒
3.效果
如果不加transition属性，图片img在鼠标悬停到图片上时自动变大，几乎是一瞬间。
如果加了transition属性，并设置时间xx秒，则图片变化是慢慢按照所定时间完成的。（其中all表示所有属性值变化，也可以单独设置某个属性值，比如只变化width或者height）
十.修饰属性--透明度，光标类型
1.透明度
（1）使用
（2）效果
略
2.光标类型
（1）使用
（2）效果
略
十二.案例（淘宝轮播图)
1.完整效果
其中鼠标悬停到图片时出现左右箭头，图中未使用图标，而是文字代替，可以利用文字图标代替。
2.步骤
（1）大体布局
整个大盒子由三个模块组成：图片，箭头，定位点。
（2）图片模块
首先banner模块整体设置宽高且居中，然后由于多张图片放入，超出盒子大小，选择隐藏，后续轮播效果等学历gs再说。
ul嵌套三个li放置三张图片----设置图片格式。
（3）箭头模块
箭头模块分为两个小模块---pre和next箭头
首先设置pre和next两个模块的共有特征：
去掉下划线，设置宽高，背景色，然后取绝对定位，往上找最近的父级banner（banner相对定位），调整两个箭头在垂直方向的位置。
设置鼠标悬停隐藏效果：先去除两个模块的显示模式，在鼠标悬停出设置显示。
最后单独处理两个模块在水平方向的绝对位置以及圆角特征。
（4）定位点
定位点由ol嵌套三个li（多少个li表示多少个图片，后续可以增加）
先设置大模块ol的特征：
取绝对定位（相对定位为父级banner，已经在图片模块设置），设置位置以及宽高背景，圆角等效果，由于含有多个li，需设置flex浮动盒子，保证可自由变换li盒子的位置。
再设置小模块li的特征：
设置外边距，宽高，小圆点特征（即圆角为50%），背景色即鼠标悬停时形态（pointer为小手形）。