Day08：CSS 高级

目标：掌握定位的作用及特点；掌握 CSS 高级技巧

一、定位

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

实现：

1.定位模式：position

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

left
right
top
bottom

水平方向偏移：left、right，垂直方向偏移：top、bottom

1、相对定位

position: relative

特点：

不脱标，占用自己原来位置
显示模式特点保持不变（如：块级显示模式使用相对定位后还是块级显示模式）
设置边偏移则相对自己原来位置移动

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

因为相对定位不脱标，即使自己发生了偏移，还占用自己原来的位置，后面的元素没办法顶上去，会留下一片空白，所以实际开发中很少单独使用相对定位，经常配合着绝对定位一起使用。

2、绝对定位

position: absolute

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

特点：

脱标，不占位
显示模式具备行内块特点（即使是行内元素，使用了绝对定位后，设置宽高生效）
设置边偏移则相对最近的，已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

练习：使用绝对定位，实现图片在浏览器居中定位。

在这里插入图片描述

实现步骤：

设置元素绝对定位，没有最近的祖先元素设置定位属性，则该元素的绝对定位相对于浏览器可视窗口改变位置；
水平、垂直边偏移为 50%，此时图片的左上角正好在浏览器的中心位置，需要向左、向上偏移，使图片中心移动到浏览器可视窗口的中心；
子级向左、向上移动自身尺寸的一半。

量出图片尺寸，设置 margin-left: -宽度的一半，margin-top: -高度的一半。
使用 transform 属性，transform 是元素位置偏移，transform: translate(-50%, -50%)。

代码如下：

<head>
  <style>
    img {
      /* 子级设置为绝对定位，没有父级，相对浏览器可视区域改变位置 */
      position: absolute;
      left: 50%;
      top: 50%;

      /* 设置 margin-left: -宽度的一半，margin-top: -高度的一半 */
      /* margin-left: -265px;
      margin-top: -127px; */

      /* 方便：50% 就是自己宽高的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <img src="./images/login.webp" alt="">
</body>

3、固定定位

position: fixed

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

特点：

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

div {
  position: fixed;
  top: 0;
  right: 0;

  background-color: blue;
  width: 500px;
  height: 200px
}

二、堆叠层级 z-index

在这里插入图片描述

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

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

属性名：z-index

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

<head>
  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: pink;
      /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
      z-index: 3;
    }

    .box2 {
      background-color: skyblue;
      left: 100px;
      top: 100px;

      z-index: 1;
    }
  </style>
</head>

<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>

在这里插入图片描述

三、CSS 高级

1、精灵图

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

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

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值（因为3.1量出来图片左上角的坐标，要向左、向上移动精灵图，才能使要显示的部分移动到盒子的位置）

<head>
  <style>
    div {
      width: 112px;
      height: 110px;
      background-color: pink;
      background-image: url(./images/abcd.jpg);
      background-position: -256px -276px;
    }
  </style>
</head>

<body>
  <div></div>
</body>

在这里插入图片描述

2、字体图标

在这里插入图片描述
字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

（1）下载字体图标

国内免费的字体图标网站：iconfont 阿里巴巴矢量图标库

流程：登录 → 寻找图标 → 加入购物车 → 购物车，添加至项目，确定 → 下载至本地
在这里插入图片描述

（2）使用字体图标

下载解压的文件如下：
在这里插入图片描述

demo_index.html：查看字体图标，双击打开后，点击 font class 选项，复制需要使用的字体图标名称
iconfont.css 使用时，需要通过 link 引入到 html 中的 css 文件
ttf、woff、woff2 真正的字体文件

流程：

将下载好的字体图标文件全部拖到项目中；
在 html 中引入字体样式表 iconfont.css ；
标签使用字体图标类名;
- iconfont：字体图标基本样式（字体名，字体大小等等）
- icon-xxx：图标对应的类名，在 demo_index.html 中复制字体图标名称
如果要修改字体图标样式，至少要使用类选择器进行修改，不能使用标签选择器，因为在 iconfont.css 中已经使用了 .iconfont {} 类选择器，至少要使用类选择器修改字体图标样式才能覆盖生效。

<head>
  <style>
    .iconfont {
      font-size: 200px;
      color: red;
    }

    /* 通过字体图标的名称作为类选择器修改样式 */
    .icon-icon-test1 {
      color: green;
    }

    /* 自定义一个类选择器，修改图标样式 */
    .myClass {
      font-size: 100px;
      color: palevioletred;
    }
  </style>
</head>

<body>
  <span class="iconfont icon-icon-test2"></span>
  <span class="iconfont icon-icon-test1"></span>
  <span class="iconfont myClass icon-icon-test3"></span>
</body>

在这里插入图片描述

（3）上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体，再按照（2）步骤下载使用。（需要上传的图标需要是 svg 的格式）。

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

在这里插入图片描述

四、CSS 修饰属性

1、垂直对齐方式

（1）基线

在行内和行内块元素中，一行的元素默认是基线对齐，图片是行内块元素，默认也是基线对齐。

（1）当一行只有图片一个元素时，图片底部为什么会有留白。
（2）当一行有图片和文字时，图片和文字为什么没有居中对齐。
在这里插入图片描述

通过这个图，可以很清楚的了解到为什么会出现（1）（2）问题，因为浏览器在处理行内、行内块元素时，会使用基线对齐的方式，图片的底部和文字的基线对齐，这就是为什么会出现（2）问题。图片的底部为什么会留白，因为有的字母下面会超过基线，比如图片中的p字母，所以浏览器会给基线下面留出一些空白间距，图片是行内块元素，所以浏览器也会给图片下面流出一些空白间距。

（2）对齐方式

属性名：vertical-align

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middel	居中对齐
bottom	底部对齐

<head>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      /* 居中对齐 */
      vertical-align: middle;

      /* 顶对齐：最高内容的顶部 */
      /* vertical-align: top; */

      /* 底对齐：最高内容的底部 */
      /* vertical-align: bottom; */

      /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
      /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
      /* display: inline-block; */
    }
  </style>
</head>

<body>
  <div>
    <img src="./images/1.webp" alt="">
    <span>我是谁？我在哪？</span>
  </div>
</body>

在这里插入图片描述

居中对齐属性要添加到比较大的元素身上。
只要不是默认的基线对齐方式，图片的底部就没有留白，bottom 对齐方式，图片底部也没有留白。
如果一行只有图片这一个元素，可以给图片转换显示模式：display: block; 也可以去除底部留白。

2、过渡

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

属性名：transition（复合属性）

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

提示：

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

<head>
  <style>
    img {
      width: 200px;
      height: 150px;
      transition: all 1s;
    }

    img:hover {
      width: 500px;
      height: 400px;
    }
  </style>
</head>

<body>
  <img src="./images/huawei.jpg" alt="">
</body>

在这里插入图片描述

3、透明度 opacity

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

属性名：opacity

属性值：0 – 1

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

4、光标类型cursor

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

属性名：cursor

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动