WEBSTORM前端 —— 第2章：CSS —— 第6节：定位、CSS 高级技巧、修饰属性

发布于：2025-05-09 ⋅ 阅读:(10) ⋅ 点赞:(0)

目录

一、定位

（1）定位

（2）相对定位

（3）绝对定位

（4）定位居中

（5）固定定位

 （6）堆叠层级 z-index

（7）定位总结

二、高级技巧 

（1）CSS 精灵

（2）字体图标 

三、CSS 修饰属性 

（1）垂直对齐方式 vertical-align

（2）过渡 transition

 （3）透明度 opacity

 （4）光标类型 cursor

一、定位

（1）定位

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

②实现：

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

（2）相对定位

position: relative

特点：

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

拓展：很少单独使用相对定位，一般是与其他定位方式配合使用

<!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>

效果图：

（3）绝对定位

position: absolute

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

②特点：

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

效果图：

（4）定位居中

实现步骤：

  1. 绝对定位
  2. 水平、垂直边偏移为 50%
  3. 子级向左、上移动自身尺寸的一半
  • 左、上的外边距为 –尺寸的一半 
  • transform: translate(-50%, -50%)
<!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>

效果图：

（5）固定定位

position: fixed

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

②特点：

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移相对浏览器窗口改变位置
<!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>

效果图：

 （6）堆叠层级 z-index

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

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

③属性名：z-index

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

<!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>

效果图：

（7）定位总结

二、高级技巧 

（1）CSS 精灵

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

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

③实现步骤：

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

效果图：

④案例——效果图：

        源代码：

<!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）字体图标 

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

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

③优点

  1. 灵活性：灵活地修改样式，例如：尺寸、颜色等

  2. 轻量级：体积小、渲染快、降低服务器请求次数

  3. 兼容性：几乎兼容所有主流浏览器

  4. 使用方便：先下载再使用

④下载字体：iconfont 图标库：https://www.iconfont.cn/

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至

本地

⑤引入字体样式表（iconfont.css）

标签使用字体图标类名

iconfont：字体图标基本样式（字体名，字体大小等等）

icon-xxx：图标对应的类名

⑥上传矢量图

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

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

 ⑦使用字体图标

效果图：

源代码：

<!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>

三、CSS 修饰属性 

（1）垂直对齐方式 vertical-align

属性名：vertical-align

                        ​​​​​​​        

<!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>

效果图：

（2）过渡 transition

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

②属性名：transition（复合属性）

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

④提示：

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

<!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>

效果视频 / 图：

前端CSS——CSS修饰属性（过渡）

鼠标放在图片上，图片会变大

 （3）透明度 opacity

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

②属性名：opacity

③属性值：0 – 1

  • 0：完全透明（元素不可见）
  • 1：不透明
  • 0-1之间小数：半透明
<!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>

效果图：

 （4）光标类型 cursor

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

②属性名：cursor

<!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>

 效果图：

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布