web前端开发第八天课程

1定位

作用：灵活改变盒子在网页中的位置

实现:

1. 定位模式：position
2. 边偏移： 设置盒子的位置top=0;/bottom/left/right

相对位置（position:relative）

特点：

1. 改变位置的参照物是自己原来的位置
2. 不脱表，占位
3. 标签显示模式特点不变

绝对定位（position:absolute）

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

1. 脱标，不占位
2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
3. 显示模式特点改变；宽高生效(具备了行内块的特点)

定位居中

实现步骤：

1. 绝对定位
2. 水平、垂直边偏移为50%
3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为尺寸的一半
• transform:translate(-50%,-50%)

固定定位(position:fixed)

场景：元素的位置在网页滚动时不会改变

特点：

1. 脱标，不占位
2. 参照物：浏览器窗口
3. 显示模式特点具备行内块特点

2堆叠顺序

堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

z-index:1;

• 取值是整数，默认是0，取值越大显示顺序越靠上

3CSS精灵

CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。

优点：
减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加background-position属性，改变背景图位置
   3.1使用PxCook测量小图片左上角坐标
   3.2取负数坐标为background-position属性值(向左上移动图片位置)