前端学习（8月3日——8月9日）

学习目标

每天都像在还高利贷

---

学习内容

三、移动Web

（一）、平面转换、渐变

1、平面转换transform（2D转换）

• 作用：为元素添加动态效果，一般与过度配合使用
• 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
• 平移
  • 属性
    • transform：translate（x轴移动距离，y轴移动距离）；

translate（）只写一个值表示向x轴移动

• 取值
  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）
  • 正负均可
• 平移实现居中效果

• 旋转
  • 属性；transform：rotate（旋转角度）；
    • 角度单位deg
  • 技巧
    • 取值正负均可
    • 取值为正，顺时针旋转
    • 取值为负，逆时针旋转
• 改变转换原点
  • 默认情况下，转换原点是盒子中心点
  • 属性：transform- origin：水平原点位置 垂直原点位置；
  • 取值
    • 方位名词
    • 像素单位数值
    • 百分比
• 多重转换
  • 技巧：先平移再旋转
    • transform：translate（）rotate（）；
• 缩放
  • 属性
    • transform：scale（缩放倍数）；
    • transform：scale（X轴缩放倍数，Y轴缩放倍数）；
  • 技巧
    • 通常，只为scale（）设置一个值，表示X轴和Y轴等比例缩放
    • 取值大于1表示放大，取值小于1表示缩小
• 倾斜
  • 属性：transform：skew（）；
  • 取值
    • 角度度数deg

2、渐变

• 分类
  • 线性渐变
    • 属性
      
    • 取值
      • 渐变方向：可选
        • to方位名词
        • 角度度数
      • 终点位置：可选
        • 百分比

• 径向渐变
  • 作用：给按钮添加高光效果
  • 属性
  • 取值
    • 半径可以是2条，则为椭圆
    • 圆心位置取值：像素单位数值/百分比/方位名词

（二）、空间转换、动画

1、空间转换（3D转换）

Z轴位置与视线方向相同

• 平移
  • 属性
    

电脑是平面，默认无法观察Z轴平移效果
3D小括号里面必须逗号隔开三个数

• 取值
  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）

• 视距perspective
  • 作用：制定了观察者与z=0平面的距离，为元素添加透视效果
  • 透视效果：近大远小、近实远虚
  • 属性：（添加给父级，取值范围800-1200）
    perspective：视距；
• 旋转
  • transform：rotate Z（值）；
  • transform：rotate X（值）；
  • transform：rotate Y（值）；
  • 左手法则——根据旋转方向确定取值正负
    左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
    
• 立体呈现transform- style
  • 作用：设置元素的子元素是位于3D空间中还是平面中
  • 属性值
    • flat：子级处于平面中
    • preserve-3d：子级处于3D空间
  • 呈现立体图形步骤
    • 父元素添加transform- style：preserve-3d；
    • 子级定位
    • 调整子盒子的位置（位移或旋转

.cube{
  width:200px;
  height:200px
  margin:100px auto;
  transition:a11 2s;

  transform-style:preserve-3d;
  }
  
.cube div{
  position:absolute;
  left:0;
  top:0;
  width:200px;
  height:200px;
  }
.front{
  background-color:orange;
  transform:translateZ(100px);
  }
.back{
 background-color:green;
 transform:translateZ(-100px);
 }

• 缩放

2、动画animation

实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

• 实现步骤

  • 定义动画
    

  • 使用动画
    animation：动画名称 动画花费时长；

动画名称呢和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

• 精灵动画
• 多组动画

（三）、移动适配

1、分辨率与视口与二倍图使用方法

• 屏幕分辨率：纵横向上的像素点数，单位是px
  • 硬件分辨率——物理分辨率（出厂设置）
  • 缩放调节的分辨率——逻辑分辨率（软件/驱动设置）
• 视口：显示HTML网页的区域，用来约束HTML尺寸
  
  • width=device-width：视口宽度=设备宽度
  • initial-scale=1.0:缩放1倍（不缩放）
• 二倍图
  • 概念：设计稿里面每个元素的尺寸的倍数
  • 作用：防止图片在高分辨率屏幕下模糊失真

2、适配方案

• 宽度适配：宽度自适应
  • 百分比布局
  • Flex布局
• 等比适配：宽高等比缩放
  • rem
  • vw

3、rem适配方案

• rem单位，是相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1rem=1HTML字号

设备宽度大，元素尺寸大
设备宽度小，元素尺寸小

• rem-flexible.js
  • rem-flexible.js是手淘开发出的一个用来适配移动端的js库
  • 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
    
• rem-移动适配
  rem单位的尺寸=px单位数值/基准根字号

4、 less

• 简介
  
• 注释
  

• 运算
• 嵌套
  • 作用：快速生成后代选择器
• 变量
  • 概念：容器，存储数据
  • 作用：存储数据，方便使用和修改
• 语法
  • 定义变量：@变量名：数据；
  • 使用变量：CSS属性：@变量名；
• 导入
  • 作用：导入less公共样式文件
  • 语法：导入@import“文件路径”；

提示：如果是less文件可以省略后缀

• 导出
  • 作用：在less文件的第一行添加//out:储存URL （没有分号）

提示：文件名称后面添加/

• 禁止导出
  • 写法：在less文件第一行添加：//out：false

（四）、移动适配-vw

• vw布局
  • 确定设计稿对应的vw尺寸（1/100视口宽度）
    • 查看设计稿宽度—确定参考设备宽度（视口宽度）—确定vw尺寸（1/100视口宽度）
  • vw单位的尺寸=px单位数值/（1/100视口宽度）
• vh单位问题
  开发中，vw和vh不能混用，如果混用可能会导致盒子变形

（五）、响应式网页

解决方案

1、媒体查询

• 媒体特性
  • max-width：最大宽度
  • min-width：最小宽度
• 书写顺序
  
• 完整写法
  ![媒体类型
  
• 外部CSS

2、Bootstrap

• 简介
  Bootstrap 是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能晚上的网页及常见交互效果。
  中文官网下载生产文件

• 使用步骤

  • 引入Bootstrap CSS文件
  • 调试类名：container：响应式布局版心类

• 栅格系统
  栅格化湿指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
  

• 全局样式
  
  

• 组件

  • 引入样式表
  • 引入js文件
  • 复制结构，修改内容

• 字体图标
  

---

学习时间

Study Time

---

学习产出

• CSDN 博客笔记 1 篇
• 优化草草的网页