CSS的高级技巧

一.定位

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

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

• left
• right
• top
• bottom

1.相对定位

position: relative

特点：

• 不脱标，占用自己原来位置
• 显示模式特点保持不变
• 设置边偏移则相对自己原来位置移动

div {
 position: relative;
 top: 100px;
 left: 200px;
 } 

2.绝对定位

position: absolute

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

特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移则相对最近的已经定位的祖先元素改变位置
• 如果祖先元素都未定位，则相对浏览器可视区改变位置

3.定位居中

实现步骤：

1. 绝对定位

2. 水平、垂直边偏移为 50%

3. 子级向左、上移动自身尺寸的一半

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

img {
  position: absolute;
  left: 50%;
  top: 50%;
 
  /* margin-left: -265px;
  margin-top: -127px; */
 
  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
 }

4.固定定位

position: flxed

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

特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移相对浏览器窗口改变位置

div {
 position: xed;
 top: 0;
 right: 0;
 width: 500px;
 }

5.堆叠层级z-index

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

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

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高） .

.box1 {
 background-color: pink;
 /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
 z-index: 1;
 }
 .box2 {
 background-color: skyblue;
 left: 100px;
 top: 100px;
 z-index: 2;
 }

二.高级技巧

CSS 精灵

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

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

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同

2. 设置盒子背景图为精灵图

3. 添加 background-position 属性，改变背景图位置

• 3.1 使用 PxCook 测量小图片左上角坐标
• 3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

三.CSS修饰属性

垂直对齐方式

属性名：vertical-align

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

• 过渡的属性可以是具体的 CSS 属性
• 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果） t
• ransition 设置给元素本身 

img {
 width: 200px;
 height: 200px;
 transition: all 1s;
 }
 img:hover {
 width: 500px;
 height: 500px;
 }

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

• 0：完全透明（元素不可见）
• 1：不透明
• 0-1之间小数：半透明

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor