CSS - 移动Web网页开发（1）- 必掌握知识点 - #博学谷IT学习技术支持#

2D & 3D 转换与动画

一、字体图标

1. 字体图标

• 展示的是图标，本质是字体。
• 处理简单的、颜色单一的图片。
• 优点：灵活性、轻量级、兼容性、使用方便。

二、平面转换

1. 位移

• transform: translate(水平移动距离, 垂直移动距离);
• 取值：（正负均可）
  • px
  • 百分比（取盒子自身尺寸的百分比）
    注意：X 轴正向为右，Y 轴正向为下
• translate()如果只给一个值，表示 X 轴方向移动距离
• 单独设置某方向：translateX()&translateY()

2. 旋转

• transform: rotate(角度);
  注意：角度单位是 deg
• 取值正负均可（正顺，负逆）
• 使用transform-origin属性改变转换圆点
  • 默认原点是盒子中心点
  • transform-origin: 圆点水平位置 圆点垂直位置;
  • 取值
    • 方位名词
    • px
    • 百分比
• 复合属性
  • transform: translate() rotate();

3. 缩放

• transform: scale(x轴缩放倍数, y 轴缩放倍数);或transform: scale(缩放倍数);

三、渐变（了解）

• background: linear-gradient(颜色1， 颜色2);

四、空间转换（了解）

1. 空间位移

• transform: translate3d(x,y,z);
• 配合perspective属性实现透视效果
  • 给父级添加
  • transform: 值;
  • 取值：像素单位数值，数值一般在 800px-1200px

2. 空间旋转

• transform: rotate(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
  • x,y,z 取值为 0-1 之间的数字
• transform:rotateZ(值);
• 左手法则判断旋转方向：
  • 左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向。

3. 立体呈现

• 使用transform-style: preserve-3d 呈现立体图形

五、CSS3 动画

1. 定义动画

@keyframes 动画名称 {
    from {}
    to {}
}

@keyframes 动画名称 {
    0% {}
    10% {}
    15% {}
    100% {}
}

2. 使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

移动端布局

一、移动端特点

1. 分辨率分类

• 物理分辨率

• 逻辑分辨率

  iPhone 6/7/8 物理分辨率：750 x 1334 逻辑分辨率：375 x 667

2. 视口
   • 目的：实现网页宽度与设备宽度一样
   • 为了高分辨率下图片不会失真，所以有了二倍图
3. 百分比布局（流式布局）（用得少了）
   • 效果：宽度自适应，高度固定

二、Flex 布局（一）

1. Flex 布局 /弹性布局：是一种浏览器提倡的一种布局模型，使得网页布局更简单、灵活，同时避免了浮动产生的脱标问题。（IE低版本不支持）

2. 设置方式

   • 父元素添加display: flex; 子元素可以自动的挤压或拉伸

3. Flex 布局的组成部分

   • 弹性容器
   • 弹性盒子
   • 主轴
   • 侧轴 / 交叉轴

4. 主轴对齐方式

   • 属性：justify-content

   • 值：

     属性值	作用
     flex-start	默认值，起点开始一次排列
     flex-end	终点开始，依次排列
     center	沿主轴居中排列
     space-around	空白间距均分在盒子两侧
     space-between	空白间距均分在相邻盒子之间
     space-evenly	弹性盒子与容器之间间距相等

5. 侧轴对齐方式

   • 属性：align-items（添加到弹性容器） align-self（控制某个弹性盒子在侧轴的对齐方式）

   • 值：

     属性值	作用
     flex-start	默认值，起点开始一次排列
     flex-end	终点开始，依次排列
     center	沿侧轴居中排列
     stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

6. 伸缩比

   • 属性：flex: 值;（整数）
   • 注意：只占用父盒子剩余尺寸

三、Flex 布局（二）

1. 主轴方向

   • 使用flex-direction改变元素排列方向

     属性值	作用
     row	默认值，行、水平
     column	列，垂直
     row-reverse	行，从右向左
     column-reverse	列，从下向上

2. 弹性盒子换行

   • 使用flex-wrap实现弹性盒子多行排列效果
   • flex-wrap: wrap;（弹性盒子换行显示）
   • align-conten（调整行对齐方式）【取值与 justify-content 基本相同】