移动web基础知识总结

字体图标

字体图标看起来是图，本质是字，可以通过字体属性控制样式。

平面转换

在水平面进行位移、缩放、旋转、渐变等效果展示，使用transform表示。

位移

在水平或垂直方向进行移动。

• translate(x, y)：水平和垂直方向同时移动
• translateX()：水平方向移动
• translateY()：垂直方向移动

定位盒子居中

定位

• 绝对定位
• left: 50%;
• top: 50%;

移动

• translate(-50%, -50%)

旋转

• rotate：角度（单位deg）
• 旋转方向：正值表示顺时针，负值表示逆时针。

缩放

用scale表示，大于1表示放大，小于1表示缩小。

渐变

添加渐变背景效果，用background-image表示。

基本写法

透明渐变

空间转换

在空间（X、Y、Z）进行位移、缩放、旋转等效果展示，Z轴与用户视线方向重叠，使用transform表示。

位移

在空间方向进行移动。

• translate3d(x, y, z)：空间3个方向同时移动
• translateX()：水平方向移动
• translateY()：垂直方向移动
• translateZ()：Z轴方向移动

透视

产生近大远小，近实远虚的视觉效果。使用perspective设置，取值一般在800-1200px之间。

空间旋转

• rotateX()：水平方向旋转
• rotateY()：垂直方向旋转
• rotateZ()：Z轴方向旋转

左手旋转法则

左手握住旋转轴，大拇指指向坐标轴正值方向， 四根手指弯曲方向为旋转正值方向

立体呈现

让子级处于真正的3D空间内，用transform-style: preserve-3d;表示

缩放

• scale3d(x, y, z)：空间3个方向同时缩放
• scaleX()：水平方向缩放
• scaleY()：垂直方向缩放
• scaleZ()：Z轴方向缩放

动画

使用关键帧动画效果，给网页元素添加动画效果，用@keyframes表示

基本使用

定义动画

使用动画

animation属性

注意事项：

• 取值不分先后顺序；
• 动画名称和动画时长必须赋值；
• 如果出现两个时间，则第一个时间为动画时间，第二个为延迟时间。

Flex布局

使用flex布局模型完成网页基本布局。

优势和特点

• 浏览器提倡的布局模型，页面渲染性能高
• 布局简单、方便
• 避免浮动脱标的问题
• 兼容性较高（不兼容低版本浏览器）

组成部分

• 弹性容器：父级，添加display: flex; 的盒子
• 弹性盒子：子级
• 主轴：默认水平
• 侧轴：默认垂直

主侧轴对齐方式

主轴

以justiffy-content表示，取值如下：

• center：居中
• space-between：间距出现在弹性和盒子之间
• space-evenly：父子级间距都相等
• space-around：间距出现在弹性盒子两侧（子级之间的间距是父级左右两侧间距的2倍）

侧轴

align-items表示控制所有弹性盒子，align-self表示控制某个盒子。取值如下：

• center：居中
• stretch：默认值，拉伸

弹性伸缩比

• flex: 整数数字;
• 占用父级剩余尺寸的份数

修改主轴方向

将主轴设置为垂直方向，用flex-direction: column表示。

弹性盒子换行

• flex-warp: wrap;：弹性盒子换行
• align-content：调整行对齐方式，取值与主轴对齐方式基本相同

rem

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

介绍

相对于HTML标签字号计算尺寸，1rem=1HTML标签字号

基本使用

1. 给HTML标签添加字号
2. 设置元素尺寸为rem单位

媒体查询基本使用

视口不同，添加不同的根字号

vw / vh

实现视口宽度不同，网页元素宽高等比缩放效果。

基本使用

vw和vh为相对单位，相对视口尺寸计算结果。

• 1vw = 1/100视口宽度
• 1vh = 1/100视口高度

布局流程

1. 根据设计稿确定1vw尺寸
2. px单位转成vw单位尺寸——px / (1/100视口宽度)

vh弊端

• vh是相对视口高度计算尺寸
• 需要考虑全面屏，视口高度尺寸偏大