移动Web

CSS3

一、字体图标

字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片。（复杂图用精灵图）

1.1优点

灵活性:灵活地修改样式，例如:尺寸、颜色等。
轻量级:体积小、渲染快、降低服务器请求次数。
兼容性:几乎兼容所有主流浏览器。
使用方便:1. 下载字体包。2. 使用字体图标

1.2下载

www.iconfont.cn/

先选择“添加至项目”，再下载。

1.3使用

引入字体图标样式表

调用图标对应的类名，必须调用两个类名。

iconfont类基本样式，包含字体的使用等。
icon-xxx:图标对应的类名。打开demo_index.html

点击Font class,查看类名

例如：

<div class="iconfont icon-yanziwancheng"></div>

1.4上传

上传→上传SVG图标
浏览本地图标→去除颜色提交
加入购物车→下载使用

二、平面转换

改变盒子在平面内的形态（位移、旋转、缩放）
2D转换

2.1平面转换属性

transform

2.2位移

语法：transform: translate(水平移动距离，垂直移动距离);
取值：
1. 像素单位数值
2. 百分比（参照物为盒子自身尺寸） 注意：X轴正向为右，Y轴正向为下
技巧：
1. translate()如果只给出一个值,表示x轴方向移动距离
2. 单独设置某个方向的移动距离: translateX() & translateY()

位移-绝对定位居中：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

百分比参考盒子自身尺寸计算结果。

2.3旋转

语法：transform: rotate(角度); 角度单位是deg
技巧：取值正负均可。+为顺时针、-为逆时针旋转。 旋转效果必须配合过渡

2.4转换原点

语法：

1.默认圆点是盒子中心点

2.transform-origin:原点水平位置原点垂直位置;
取值： 1.方位名词( left、top、right、bottom、center) 2.像素单位数值 3.百分比（参照盒子自身尺寸计算)

2.5多重转换

使用transform复合属性实现多形态转换。

多重转换技巧：transform: translate() rotate();

注意：顺序不可颠倒，旋转会改变坐标轴向。先旋转改变了坐标轴向，位移方向会受影响。多重转换如果涉及到旋转最后书写。

2.6缩放

语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放。
1. transform: scale(缩放倍数);
2. scale值大于1表示放大, scale值小于1表示缩小。

三、渐变

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
语法：background-image: linear-gradient(颜色1,颜色2...); 工作中常用半透明渐变：透明-rgba() 例：background-image: linear-gradient(transparent,rgba(0,0,0,.6)); transparent表示透明

四、空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间:是从坐标轴角度定义的。 x 、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。z轴指向屏幕外
空间转换也叫3D转换
属性：transform

4.1空间位移

语法：
1. transform: translate3d(x, y, z);
2. transform: translateX(值);
3. transform: translateY(值);
4. transform: translateZ(值); 看不到移动效果（Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果）
取值：
1. 像素单位数值
2. 百分比

4.2透视

属性：（添加给父级）
1. perspective:值;
2. 取值:像素单位数值，数值一般在800- 1200。
3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
作用：产生近大远小、近实远虚的视觉效果。

4.3空间转换

rotateZ

transform: rotateZ(值);

rotateX

transform: rotateX(值);

rotateX

transform: rotateX(值);

左手法则（判断旋转方向）：左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向。

4.4立体呈现

使用transform-style: preserve-3d呈现立体图形。 使用perspective透视属性不能呈现立体图形，perspective只增加近大远小、近实远虚的视觉效果。
实现方法：
1. 添加transform-style：preserve-3d;
2. 使子元素处于真正的3d空间
3. 默认值flat,表示子元素处于2D平面内呈现

五、动画

使用animation添加动画效果

实现步骤：

定义动画

两个状态变化

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

多个状态变化

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

百分比是指动画总时长的占比

使用动画

animation:动画名称动画花费时长;

5.1 animation复合属性

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;
注意：
1. 动画名称和动画时长必须赋值
2. 取值不分先后顺序
3. 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

5.1.1 速度曲线

steps(n) 分步动画将动画分为n步
linear 匀速运动曲线，一般不使用

5.1.2 延迟时间

控制动画的先后出场顺序

5.1.3 重复次数

数字（默认是重复一次）
infinite 无限循环

5.1.4 动画方向

alternate 带有反向效果的动画（常用）

5.1.5 执行完毕时状态

backwards 默认值，动画停留再最初的状态
forwards 动画停留在结束的状态

5.2 animation属性拆分写法

Flex

一、百分比布局（流式布局）

效果: 宽度自适应，高度固定。

二、Flex布局（弹性布局）

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

2.1 作用：

1. 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
2. Flex布局非常适合结构化布局

2.2 设置方式

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

2.3 组成

弹性容器
弹性盒子
主轴（默认水平自左向右是主轴，弹性盒子都是沿着主轴排列）
侧轴/交叉轴

2.4 对齐方式

2.4.1 使用`justify-content`调节元素在主轴的对齐方式（添加到弹性容器）

center 沿主轴居中排列（居中）
space-around 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧（间距加在子级的两侧）
space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间（间距在弹性盒子/子集之间）
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（所有地方的间距都相等）

2.4.2 使用`align-items`调节元素在侧轴的对齐方式（添加到弹性容器）

center 沿侧轴居中排列
stretch 默认值,弹性盒子沿着主轴线被拉伸至铺满容器（需去掉子级height才能看到拉伸效果）

align-self：控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)

2.5 伸缩比

使用flex属性修改弹性盒子伸缩比
属性：flex:值（占用父级剩余尺寸的份数）
取值分类：数值(整数) 注意：只占用父盒子剩余尺寸

2.6 修改主轴方向

主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性:flex-direction
1. row 行，水平(默认值)
2. column 列，垂直
3. row-reverse 行，从右向左
4. column-reverse 列，从下向上

2.7 弹性盒子换行

flex布局会挤压盒子尺寸
弹性盒子换行显示:flex-wrap : wrap;（默认是nowarp不换行。）
调整行对齐方式：align-content （与justify-content类似）
1. center
2. space-around
3. space-between

移动适配

一、rem （长度单位）

相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小使HTML字号大小不同，实现移动适配

rem单位的尺寸= px单位数值/基准根字号

例：width: (50 / 37.5rem);

1.1 媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
当某个条件成立,执行对应的CSS样式

    @media (媒体特性){
            选择器{
                CSS属性
            }
        }

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。

//例如，视口宽度为320px，根字号为32px。
    @media (width: 320px){
            html{
                font-size: 32px;
            }
        }
        
//例如，视口宽度为375px，根字号为37.5px。
    @media (width: 375px){
            html{
                font-size: 37.5px;
            }
        }

使用flexible.js根据不同的视口宽度给网页中html根节点设置不同的font-size。在<body>结束位置引入js文件

<script src="./js/flexible.js"></script>

1.2 Less

Less是一个CSS预处理器, Less文件后缀是.less
扩充了CSS语言,使CSS具备一定的逻辑性、计算能力。
注意︰浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

1.2.1 EasyLess插件

作用:less文件保存自动生成css文件

1.2.2 注释

单行注释
- 语法: // 注释内容
- 快捷键:ctrl + /
块注释
- 语法: /* 注释内容 */
- 快捷键: shift + alt +A

1.2.3 计算

加： 100+50px
减： 100-50px
乘： 100*50px
除： (100 / 50px) 或 100 ./ 50px

1.2.4 嵌套

快速生成后代选择器

.父级选择器{
    // 父级样式
    .子级选择器{
        // 子级样式
    }
}

例： less

.father{
    background-color: pink;
    .son{
        background-color: green;
    }
}

自动生成的CSS

.father {
  background-color: pink;
}
.father .son {
  background-color: green;
}

&不生成后代选择器,表示当前选择器，通常配合伪类或伪元素使用例： less

.father{
    background-color: pink;
    .son{
        background-color: green;
        &:hover{
            background-color: blue;
        }
    }
}

自动生成的CSS

.father {
  background-color: pink;
}
.father .son {
  background-color: green;
}
.father .son:hover {
  background-color: blue;
}

1.2.5 变量

变量:存储数据,方便使用和修改。
定义变量: @变量名:值;
使用变量: CSS属性: @变量名;

1.2.6 导入

@import '文件地址'; (可以省略.less后缀)

1.2.7 导出

// out: ./文件夹名/文件名.css 必须写在第一行
禁止导出：// out: false 必须写在第一行

二、vw/vh （长度单位）

2.1 vw

vw单位的尺寸=px单位数值/(1/100视口宽度)

2.2 vh

vh单位的尺寸=px单位数值/(1/100视口宽度) 注意：vw和vh不能混用，同时使用一种即可实现移动适配。

响应式

一、使用媒体查询实现响应式

媒体特性的常用写法： max-width min-width

/* 视口宽度>= 768px，网页背景色是粉色
   视口宽度>= 992px，网页背景色是绿色
   视口宽度>= 1200px，网页背景色是 skyblue
*/
@media (min-width: 768px)
    body {
        background-color:pink;
    }
}
@media (min-width: 992px){
    body {
        background-color:green;
    }
}
@media (min-width: 1200px){
    body {
        background-color:skyblue;
    }
}

min-width从小到大写

max-width从大到小写

外链式CSS引入 <link rel="stylesheet" media="逻辑符媒体类型 and（媒体特性)" href="xx.css"> 例:

/* 视口宽度>= 768px，网页背景色是粉色
   视口宽度>= 992px，网页背景色是绿色
   视口宽度>= 1200px，网页背景色是 skyblue
*/
<link rel="stylesheet" media="(min-width: 768px)" href="xx.css">
<link rel="stylesheet" media="(min-width: 992px)" href="xx.css">
<link rel="stylesheet" media="(min-width: 1200px)" href="xx.css">

二、bootstrap

使用BootStrap框架快速布局响应式网页

2.1 下载

www.bootcss.com/

2.2 使用

引入: BootStrap提供的CSS代码 <link rel="stylesheet" href="./bootstrap 3.3.7/css/bootstrap.css">
使用：直接调用类名

移动Web

移动Web

CSS3

一、字体图标

1.1优点

1.2下载

1.3使用

1.4上传

二、平面转换

2.1平面转换属性

2.2位移

2.3旋转

2.4转换原点

2.5多重转换

2.6缩放

三、渐变

四、空间转换

4.1空间位移

4.2透视

4.3空间转换

4.4立体呈现

五、动画

5.1 animation复合属性

5.1.1 速度曲线

5.1.2 延迟时间

5.1.3 重复次数

5.1.4 动画方向

5.1.5 执行完毕时状态

5.2 animation属性拆分写法

Flex

一、百分比布局（流式布局）

二、Flex布局 （弹性布局）

2.1 作用：

2.2 设置方式

2.3 组成

2.4 对齐方式

2.4.1 使用justify-content调节元素在主轴的对齐方式（添加到弹性容器）

2.4.2 使用align-items调节元素在侧轴的对齐方式（添加到弹性容器）

2.5 伸缩比

2.6 修改主轴方向

2.7 弹性盒子换行

移动适配

一、rem （长度单位）

1.1 媒体查询

1.2 Less

1.2.1 EasyLess插件

1.2.2 注释

1.2.3 计算

1.2.4 嵌套

1.2.5 变量

1.2.6 导入

1.2.7 导出

二、vw/vh （长度单位）

2.1 vw

2.2 vh

响应式

一、使用媒体查询实现响应式

二、bootstrap

2.1 下载

2.2 使用

二、Flex布局（弹性布局）

2.4.1 使用`justify-content`调节元素在主轴的对齐方式（添加到弹性容器）

2.4.2 使用`align-items`调节元素在侧轴的对齐方式（添加到弹性容器）