CSS——定位、CSS高级技巧、修饰属性

1、定位

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

实现：

定位模式：position
边偏移：设置盒子的位置
1. left
2. right
3. top
4. bottom

1.1 相对定位

position：relative

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

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

  div {
    position: relative;
    top: 100px;
    left: 200px;
  }    
  </style>
</head>
<body>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <div><img src="./images/1.webp" alt=""></div>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>

1.2 绝对定位

position：absolute

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 400px;
    }

    .news {
      position: relative;
    
      margin: 100px auto;
      width: 400px;
      height: 350px;
      background-color: #f8f8f8;
    }

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

    .news span {
      position: absolute;
      top: 0;
      right: 0;

      /* display: block; */
      width: 92px;
      height: 32px;
      background-color: rgba(0,0,0,0.6);
      text-align: center;
      line-height: 32px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="news">
    <img src="./images/news.jpg" alt="">
    <span>展会活动</span>
    <h4>2222世界移动大会</h4>
  </div>
</body>
</html>

1.3 定位居中

实现步骤：

绝对定位
水平、垂直边偏移为50%
子级向左、上移动自身尺寸的一半
1. 左、上的外边距为 - 尺寸的一半
2. transform：translate（-50%，-50%）

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位-居中</title>
  <style>
    img {
      position: absolute;
      left: 50%;
      top: 50%;

      /* margin-left: -265px;
      margin-top: -127px; */

      /* 方便： 50% 就是自己宽高的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <img src="./images/login.webp" alt="">
</body>
</html>

1.4 固定定位

position：fixed

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

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

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

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

      width: 500px;
    }
  </style>
</head>
<body>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <div><img src="./images/1.webp" alt=""></div>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>

1.5 堆叠层级 z-index

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

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

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>堆叠顺序-z-index</title>
  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
    }

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

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

      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

定位总结

2、CSS精灵

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

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

实现步骤：

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

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 精灵-基本使用</title>
  <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>
</html>

2.1 CSS精灵案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东服务</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .service {
      margin: 100px auto;
      width: 1190px;
      height: 42px;
      /* background-color: pink; */
    }

    .service ul {
      display: flex;
    }

    .service li {
      display: flex;
      padding-left: 40px;
      width: 297px;
      height: 42px;
      /* background-color: skyblue; */
    }

    .service li h5 {
      margin-right: 10px;
      width: 36px;
      height: 42px;
      /* background-color: pink; */
      background: url(./images/sprite.png) 0 -192px;
    }

    .service li:nth-child(2) h5 {
      background-position: -41px -192px;
    }

    .service li:nth-child(3) h5 {
      background-position: -82px -192px;
    }

    .service li:nth-child(4) h5 {
      background-position: -123px -192px;
    }

    .service li p {
      font-size: 18px;
      color: #444;
      font-weight: 700;
      line-height: 42px;
    }
  </style>
</head>
<body>
  <div class="service">
    <ul>
      <li>
        <h5></h5>
        <p>品类齐全，轻松购物</p>
      </li>
      <li>
        <h5></h5>
        <p>多仓直发，极速配送</p>
      </li>
      <li>
        <h5></h5>
        <p>正品行货，精致服务</p>
      </li>
      <li>
        <h5></h5>
        <p>天天低价，畅选无忧</p>
      </li>
      
    </ul>
  </div>
</body>
</html>

2.2 字体图标

字体图标：展示的是图标，本质是字体

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

优点：

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

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体验字体图标</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    .iconfont {
      font-size: 200px;
      color: red;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-icon-test2"></span>
</body>
</html>

2.3 字体图标-下载字体

iconfont图标库：https://www.iconfont.cn/

下载字体：登录 ---> 素材库 ---> 官方图标库 ---> 进入图标库 ---> 选图标，加入购物车 ---> 购物车，添加至项目，确定 ---> 下载至本地

2.4 字体图标-使用字体

引入字体样式表（iconfont.css
标签使用字体图标类名
1. iconfont：字体图标基本样式（字体名，字体大小等等）
2. icon-xxx：图标对应的类名

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用字体图标</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    /* 如果要调整字体大小，注意 选择器的优先级 要高于 iconfont 类 */
    .iconfont {
      font-size: 200px;
      color: orange;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-icon-test3"></span>
</body>
</html>

2.5 字体图标-上传矢量图

作用：项目特有的图标上传到iconfont图标库，生成字体

3、垂直对齐方式vertical-align

属性名：vertical-align

属性值

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直对齐方式</title>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      /* vertical-align: middle; */

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

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

      /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
      /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
      display: block;
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/1.webp" alt="">
    <!-- 我是谁？我在哪？ -->
  </div>
</body>
</html>

4、过渡transition

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

属性名：transition（复合属性）

属性值：过渡的属性花费时间（s）

提示：

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

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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>
</html>

5、透明度opacity

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

属性名：opacity

属性值：0-1

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

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>透明度</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: orange;

      opacity: 0;

      opacity: 1;

      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/phone.png" alt="">
  </div>
</body>
</html>

6、光标类型cursor

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

属性名：cursor

属性值

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>光标类型</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      cursor: pointer;    
      cursor: text;  
      cursor: move;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

7、案例轮播图

技术点：

定位
字体图标
Flex布局

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .banner {
      position: relative;
      margin: 100px auto;
      width: 564px;
      height: 315px;
      /* background-color: pink; */
      overflow: hidden;
    }

    /* 图片 */
    .banner img {
      width: 564px;
      border-radius: 12px;
      vertical-align: middle;
    }

    .banner ul {
      display: flex;
    }

    /* 箭头 */
    .banner .prev,
    .banner .next {
      /* 隐藏 */
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      width: 20px;
      height: 30px;
      background-color: rgba(0,0,0, 0.3);

      text-decoration: none;
      color: #fff;
      line-height: 30px;
    }

    /* 鼠标滑到banner区域，箭头要显示 display:block */
    .banner:hover .prev,
    .banner:hover .next {
      display: block;
    }

    .banner .prev {
      left: 0;
      border-radius: 0 15px 15px 0;
    }

    .banner .next {
      right: 0;
      border-radius: 15px 0 0 15px;
      text-align: center;
    }

    /* 圆点 */
    .banner ol {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      height: 13px;
      background-color: rgba(255,255,255,0.3);

      display: flex;

      border-radius: 10px;
    }

    .banner ol li {
      margin: 3px;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    /* 橙色的li */
    .banner ol .active {
      background-color: #ff5000;
    }
  </style>
</head>
<body>
  <div class="banner">
    <!-- 图: ul > li -->
    <ul>
      <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
    </ul>
    <!-- 箭头 -->
    <!-- 上一张 prev -->
    <a href="#" class="prev">
      <i class="iconfont icon-zuoce"></i>
    </a>
    <!-- 下一张 next -->
    <a href="#" class="next">
      <i class="iconfont icon-youce"></i>
    </a>
    <!-- 圆点 -->
    <ol>
      <li></li>
      <li class="active"></li>
      <li></li>
    </ol>
  </div>
</body>
</html>

轮播图素材代码【免费】综合案例-轮播图素材代码.zip资源-CSDN文库

CSS——定位、CSS高级技巧、修饰属性

1、定位

1.1 相对定位

1.2 绝对定位

1.3 定位居中

1.4 固定定位

1.5 堆叠层级 z-index

2、CSS精灵

2.1 CSS精灵案例

2.2 字体图标

2.3 字体图标-下载字体

2.4 字体图标-使用字体

2.5 字体图标-上传矢量图

3、垂直对齐方式vertical-align

4、过渡transition

5、透明度opacity

6、光标类型cursor

7、案例 轮播图

7、案例轮播图