Day6课程-1 课程内容

Day6课程-1 课程内容

一、课程介绍

1.学习内容

定位、CSS高级技巧（及两个案例）、修饰属性

2.CSS精灵 案例练习

案例1：

案例2：轮播图

二、定位

（相对定位，绝对定位和固定）

○ 作用：灵活地改变盒子在网页中的位置（可以让两个标签压在一起显示，例如案例2里轮播图左右的箭头/下方的圆形）
○ 实现：定位模式 position → 边偏移（设置盒子的left/right/top/bottom）
○ 定位模式
   ● 相对定位 relative 特点：
      ○ 这种方法改变位置的参照物是自己原来的位置
      ○ 不脱标，占位的
      ○ 标签显示模式特点不变
         工作中一般不单独使用 relative 的定位模式，一般会与其他定位模式配合使用
   ● 绝对定位 absolute：
      ○ 使用场景：子级绝对定位，父级相对定位（子绝父相）
      ○ 特点：
         ● 脱标，不占位；
         ● 参照物：先 找 最近的 且 已经定位的 祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置。
         ● 显示模式特点改变：宽高生效（具备了行内块的特点）
      ○ 居中 【案例说明】：

         ● 方法1：用 margin 外边距调整；
            方法2：用 transform 调整

            实现步骤：
            绝对定位 → 水平、垂直边偏移到 50% → 子级向左、上移动自身尺寸的一半（左、上外边距 “-尺寸的一半” / transform:translate(-50%,-50%)）

/* 方法1 margin */
   img {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -127px;
            margin-left: -265px;
        }

/* 方法2 transform */
   img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%)
        }

            弹幕区：transform是控制当前盒子移动(translate)、旋转(rotate)、缩放(scale)和倾斜(skew)的。

   ● 固定定位 fixed：
      ○ 使用场景：元素的位置在网页滚动时不会改变
      ○ 特点：
         ● 脱标，不占位；
         ● 显示模式具备行内块特点
         ● 设置边偏移相对浏览器窗口改变位置（简单来说，就是参照物是浏览器窗口）

总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1. 已经定位的祖先元素 2. 浏览器可视区
固定定位	fixed	是	行内块特点	浏览器窗口

三、堆叠顺序 z-index

○ 默认效果：按照标签书写顺序，后来者居上
○ 作用：设置定位元素的层级顺序，改变定位元素的显示顺序
○ z-index 的取值是整数，默认是0，数字越大显示顺序越往上
○ 案例：
      

    <title>堆叠顺序z-index</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            background-color: skyblue;
            left: 100px;
            top: 100px;
            z-index: 1;
        }

        .box3 {
            background-color: orange;
            left: 200px;
            top: 200px;
        }
    </style>

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

四、CSS精灵

○ 又称 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再 background-position 精确的定位出背景图片的位置。
○ 不涉及到新的属性，只是一种灵活用法
○ 优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
○ 实现步骤：
   1. 创建盒子，盒子尺寸与小图尺寸相同
   2. 设置盒子背景图为精灵图
   3. 添加 background-position 属性，改变背景图位置
      3.1 使用 PxCook 测量小图片左上角坐标
      3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

五、字体图标

字体图标
○ 展示的是图标，本质是字体
○ 作用：在网页中添加简单的、颜色单一的小图标
○ 优点：灵活性、轻量级、兼容性、使用方便（先下载再使用）

1. 下载字体

○ iconfont 图标库（https://www.iconfont.cn/）
○ 下载字体：登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

2. 使用字体

○ 步骤：
   1. 引入字体样式表（iconfont.css）
<link rel="stylesheet" href="./iconfont/iconfont.css">
   2. 标签使用字体图标类名（调用类名）
<span class="iconfont icon-xxx"></span>（字体图标基本样式 iconfont（字体名，字体大小等等） + 图标对应的类名icon-xxx）

○ 弹幕区：注意，要看使用说明文件里面的教程，有些是被当作字符实体使用，放在标签当中
○ 注意使用过程中类选择器的使用：如果要调整字体大小，注意 选择器的优先级 要高于 iconfont 类选择器（实际开发上，为了确保样式统一，一定是用 iconfont 类选择器）

3. 上传矢量图

○ 作用：项目特有的图标（.svg矢量图）上传到 iconfont 图标库，生成字体
○ 上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核
   其中，提交的步骤，推荐选择“去除颜色并提交”的选项。
○ 接着就按照下载字体的步骤做就行了。

六、CSS修饰属性

1. 垂直对齐方式 vertical-align

属性值：
○ baseline（基线对齐，默认属性值。此情况下，图片下方还存在空白间距，其他属性值没有存在空白的情况），
○ top（最高内容的顶部）
○ middle（常用）
○ bottom（最低内容的底部）

因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐。
效果：图片img的地下有空白，转块级不按基线对齐，可以由此消除默认状态时图片下方会存在的空白间距。（旁边没有一起的文字的时候）

2. 过渡 transition（复合属性）

○ 作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
○ 属性值：过渡的属性 花费时间(s)
○ 作用范围：
   ● 可以是具体的 CSS 属性
   ● 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
○ 提示：transition 设置给元素本身，谁做过渡就给谁写代码

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

3. 透明度 opacity

○ 作用：设置整个元素的透明度（包含背景和内容）
○ 属性值：0 - 1（0：完全透明；1：不透明）

4. 光标类型 cursor

5. 轮播图

技术点：定位 、字体图标 、Flex 布局

---