Web移动端

1.平面转换

改变盒子在平面内的形态(位移,旋转,缩放)
2D

1.1位移

目标:使用translate实现元素位移效果
语法：transform: translate (水平移动距离,垂直移动距离);
取值:像素单位数值 百分比(参照物为盒子自身) X轴往右为正 Y轴往下为正
四种水平垂直居中
①定位子绝父相
②transform:translate(x,y);
③calc函数
④top=bottom,left=right.子盒子不能给宽高.就会垂直居中

1.2 旋转

使用rotate实现元素旋转效果

transform:rotate

角度单位是deg
取值正负都可以(顺逆时针)
取正顺时针 取负逆时针

1.2.1转换原点

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

1.3 缩放

使用scale改变元素的放大倍数
transform:scale(x轴缩放倍数,y轴缩放倍数);
一般只设置一个值表示x轴和y轴等比例缩放(可以写小数)

1.4 渐变

渐变背景background-image
和背景图片互斥
上下渐变

/* 从上往下 */
            background-image: linear-gradient( pink,red);
            /* 从左往右渐变 或者 90deg */
            /* background-image: linear-gradient( to right, pink,red); */
        }
        /* 从左到右 */
        /* .box {
            transform: rotate(-90deg);
        } */

2. 3D转换 transform

2.1空间转换（了解）

目标：使用transform属性实现元素在空间内的位移，旋转，缩放等效果
空间:是从坐标轴角度定义的。x，y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
空间转换也叫3D转换
属性 : transform

2.1.1空间位移 translate(加透视）

语法：trasform：translate3d(x,y,z);

transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

透视

目标:使用perspective属性实现透视效果
思考:生活中，同一个物体，观察距离不同，视觉上有什么区别 ?
答:近大远小、近清楚远模糊
思考:默认情况下，为什么无法观察到Z轴位移效果?
答:Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
属性（添加给父级）

perspective: 值；

取值:像素单位数值，数值一般在800~1200。
透视距离也称为视距（人的眼睛到屏幕的距离）

2.1.2 空间旋转 rotate(加透视）

语法：

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);

不指定默认为Z轴


拓展：
rotate3d(x,y,z,角度度数):用来设置自定义旋转轴的位置及旋转的角度
x，y，z取值为0~1之间的数字

2.1.3 立体呈现

目标：使用transform-style:preserve-3D呈现立体图形

思考:使用perspective透视属性能否呈现立体图形?
答:不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法：

1. 添加 transform-style: preserve-3d;
2. 使子元素处于真正的3d空间
3. 默认值flat,表示子元素处于2D平面内呈现
   呈现立体图形步骤：
   1.盒子父元素添加transform-style: preserve-3d
   2.按需求设置子盒子的位置(位移或旋转)
   注意：
   空间内，转换元素都有自已独立的坐标轴，互不干扰

2.2 动画

目标：使用animation添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）
动画的本质：快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元:顿或动画帧
实现步骤：
1.定义动画

from是初始状态（可省略），to是结束状态
2.使用动画

目标:使用animation相关属性控制动画执行过程

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

注意:
1.动画名称和动画时长必须赋值（不能省略）
2.取值不分先后顺序
3.如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

infinite 无限循环 alternate 反向 linear 运动曲线循环
暂停动画：

div:hover {
            animation-play-state: paused;
        }

动画属性：
目标:使用steps实现逐动画

逐帧动画:开发中，一般配合精灵图实现动画效果

animation-timing-function: steps(N)

将动画过程等分成N份
精灵动画制作步骤：
1.准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
2.定义动画
改变背景图的位置(移动的距离就是精灵图的宽度
3.使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同
添加无限重复效果
分辨率：


思考:制作网页参考物理分辨率还是逻辑分辨率?
逻辑分辨率

1.移动端特点

1.1视口viewport

建议不要调
目标:使用meta标签设置视口宽度，制作适配不同设备宽度device-width的网页
1.手机屏幕尺寸不同，网页宽度为100%
2.网页的宽度和逻辑分辨率尺寸相同
默认情况下，网页的宽度和逻辑分辨率不同，默认网页的宽度是980px
目标:网页宽度和设备宽度(分辨率)相同
解决办法:添加视口标签
视口:显示HTML网页的区域，用来约束HTML尺寸

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport:视口
width=device-width: 视口宽度 = 设备宽度
initial-scale=1.0:缩放1倍(不缩放)

1.2 二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

2.百分比布局

目标:能够使用百分比布局开发网页
百分比布局，也叫流式布局
效果:宽度自适应，高度固定

3.Flex布局(弹性布局)

目标：

能够使用Flex布局模型灵活，快速的开发网页
是一种浏览器提倡的布局模型
布局网页更简单，灵活
避免浮动脱标的问题

作用：

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

设置方式

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

组成部分

弹性容器，弹性盒子，主轴（水平方向），侧轴/交叉轴（垂直方向）

弹性容器里面的弹性盒子（弹性容器内的第一级）没有设置宽高的话，高度默认为弹性容器的高度，宽度为内容的宽度

3.1主轴对齐方式

给弹性容器加

/* 调整主轴的对齐方式 */
justify-content: flex-start;/*居左对齐 */
justify-content: flex-end;/* 居右对齐 */
justify-content: center;/*居中对齐*/
/* 弹性盒子左右的间距是相同的 */
justify-content: space-around;
/* 第一个盒子靠左,最后一个靠右 */
justify-content: space-between;
/* 均分间隙 */
justify-content: space-evenly;

3.1.1目标:

使用justify-content调节元素在主轴的对齐方式
修改主轴对齐方式属性: justify-content

3.2侧轴对齐方式

3.2.1目标：

使用align-items调节元素在侧轴的对齐方式

/* 调整侧轴的对齐方式 */
/* 居上对齐 */
align-items: flex-start; 
/* 局下对齐 */
align-items: end;
/* 居中对齐 */
align-items: center;
/* 不给子盒子高度时就会拉伸到和父盒子一样长  默认高度*/
align-items: stretch;

align-items控制全部弹性盒子在侧轴的对齐方式( 添加到弹性容器)
align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
盒子水平垂直居中方法：主轴侧轴全部center

3.3伸缩比

/*子盒子没有宽度时,把父盒子分成四份,每个盒子占一份 */
flex: 1;

3.3.1目标：

使用flex属性修改弹性盒子伸缩比

3.3.2属性：

flex:值；

3.3.3取值分类:

数值（整数）

3.3.4注意：

只占父盒子剩余尺寸
1.当弹性盒子的宽度之和大于弹性容器的宽度，弹性盒子宽度会等比例压缩

2.给父盒子设置了display：flex；之后，所有弹性盒子里 float浮动 position定位 clear vertical-align是失效的

css书写顺序

位置相关 字体大小 背景 其他

3.4.主轴方向

3.4.1目标:

使用flex-direction改变元素排列方向
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性: flex-direction

3.5 弹性盒子换行

3.5.1 目标：

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

移动适配

1.rem：目前多数企业在用的解决方案

1.1 长度单位

目标：能够使用rem单位设置网页元素的尺寸
网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局不能实现移动适配
px单位是绝对单位 百分比布局特点宽度自适应，高度固定

1.1.1 rem单位

rem是相对单位 相对根标签（）
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

1.1.2 媒体查询

手机屏幕大小不同，分辨率不同，用媒体查询设置不同的HTML标签字号
目标：媒体查询可以设置差异化的CSS样式
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
写法：

@media 声明媒体查询
目前rem布局方案中，将网页等分成10份，html标签的字号为视口宽度的1/10。

1.1.3 rem适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

1.1.4 flexible

目标:使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
代替媒体查询的效果
flexible.js是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

2.vw / vh：未来的解决方案

目标：能够使用vw单位设置网页元素的尺寸
相对单位 相对视口的尺寸计算结果

vw : viewport width
1vw = 1/100视口宽度

vh : viewport height
1vh=1/100视口高度

2.1 vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

2.1.1 vw单位尺寸

1.确定设计稿对应的vw尺寸 (1/100视口宽度)
2. vw单位的尺寸 = px单位数值 /(1/100 视口宽度)
开发中，不要把vw和vh混用
vh是1/100视口高度（ipad），全面屏视口高度尺寸大，如果混用可能会导致盒子变形

响应式

1.响应式网页

1.1.1 媒体查询

目标:能够根据设备宽度的变化，设置差异化样式

1.1.2 书写顺序

min-width( 从小到大)
max-width( 从大到小)

完整写法：

媒体是用来区分设备类型的

媒体特性主要用来描述媒体类型的具体特征
外链式CSS引入

<Link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性) href="xx.css">

服务器

UI框架

1.UI框架概念

将常见效果进行统一封装后形成的一套代码，例如:BootStrap.
作用：
基于框架开发，效率高，稳定性高

2.BootStrap简介

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

3.BootStrap栅格系统

目标:使用BootStrap栅格系统布局响应式网页
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

1…container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中
2…container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%
3.分别使用row类名和col类名定义栅格布局的行和列。
注意:
1.container类自带间距15px;
2.row类自带间距-15px

BFC:块级格式化上下文

BFC(Block formatting context)
把BFC理解成一块独立的染区域，BFC可以看成元素的一种属性。当元素拥有了BFC属性以后，这个元素就可以看作隔离了的独立容器，容器内的元素不会影响容器外的元素。
开启BFC
1.浮动
2定位
3.display: inline-block table-cell table-caption table table-row table-row-group table-header-grouptable-footer-group inline-table flow-root flex inline-flex grid inline-grid
4.overflow
5.
BFC规则
1:内部的box一行一行排列
2:属于同一个BFC的两个box在垂直方向的margin会发生重叠
3:每个元素的margin box的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
4:BFC区域与外部的float box不会发生重叠
5:BFC就是页面上的一个隔离的独立容器，容器内外的元素不会相互影响
6:在BFC内部的浮动元素也计算在BFC的宽度之内
BFC作用
1避免外边距塌陷
2.清除浮动
3.可以防止浮动元素遮盖
4.可以调整元素的位置(定位)

js学习方法：

重在理解，重在问为什么