一.定位

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为小手形）。