前端学习（7月24日——7月27日）

学习目标：

• 7月24日：P95——P100
• 7月25日：P101——P120
• 7月26日：P121——P131
• 7月27日：笔记整理

---

学习内容：

（六）、定位、CSS高级技巧、修饰属性

1、定位

• 作用：灵活的改变盒子在网页中的位置
• 实现
  • 定位模式：position
  • 边偏移：设置盒子的位置
• 相对定位position- relative
• 绝对定位position- absolute
• 定位居中
  • 实现步骤
    • 绝对定位
    • 水平、垂直边偏移为50%
    • 子级向左、上移动自身尺寸的一半
      • 左、上的外边距为尺寸的一半
      • transform：translate（-50%，-50%）
• 固定定位position- fixed
  • 场景：元素的位置在网页滚动时不会变
• 堆叠层级z-index
  • 默认效果：按照标签书写顺序，后来者
  • 作用：设置定位元素的层级顺序，改变定位元素的显示顺序

2、CSS高级技巧

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

3、修饰属性

• 字体图标：展示的是图标，本质是字体
  • 作用：在网页中添加简单的、颜色单一的小图标
  • 优点
    • 灵活性： 灵活地修改样式，例如：尺寸、颜色等
    • 轻量级：体积小、渲染快、降低服务器请求次数
    • 兼容性：几乎兼容所有主流浏览器
    • 使用方便：先下载再使用
  • 下载图标
  • 使用字体
    • 引入字体样式表（iconfront.css）
    • 标签 使用字体图标类名
      • iconfront：字体图标基本样式（字体名，字体大小等）
      • icon-xxx：图标对应的类名

如果要调整字体大小，注意选择器的优先级要高于iconfont类

• • 上传矢量图
• 垂直对齐方式vertical- align
  
• 过渡translation
  • 作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
  • 属性值：过渡的属性 花费时间（s）
• 透明度opacity
  • 作用：设置整个元素的透明度（包含背景和内容）
  • 属性值：0-1
    • 0:完全透明（元素不可见）
    • 1:不透明
    • 0-1之间小数：半透明
• 光标类型cursor
  • 作用：鼠标悬停在元素上时指针显示样式
  • 属性值
    

---

学习时间：

• 7月24日晚上10点—11点
• 7月25日上午10点—12点
• 7月26日晚上11点—12点
• 7月27日上午10点—12点

---

学习产出：

• CSDN 博客笔记 1 篇

最近有些乱七八糟的事情，学习进度没有跟上