目录
一、字体图标iconfont
使用字体图标---unicode编码
①引入样式表：iconfont.css
<link rel="stylesheet" href="./iconfont.css">②复制粘贴图标对应的unicode编码 <span></span>
③设置文字字体
span{
font-family: 'iconfont';
}使用字体图标---类名
①引入样式表
<link rel="stylesheet" href="./iconfont.css">②调用图标对应的类名，必须调用两个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx:图标对应的类名
<span class="iconfont icon-xxx"></span>二、平面转换
属性：transform
形态：位移、旋转、缩放
Ⅰ.位移
语法：transform：translate(水平移动距离，垂直移动距离） 单位:px或者取值百分比时没有单位
注意：如果只给出一个值，表示x轴方向移动距离
transform：translateX(水平移动距离)
transform：translateY(垂直移动距离)
取值：正负均可 x轴正向为右，y轴正向为下
实现绝对定位元素居中
position: absolute;
/* 参考父盒子尺寸 */
left: 50%;
top: 50%;
/* 参考自身尺寸 */
transform:translate(-50%,-50%);Ⅱ.旋转
语法：transform:rotate(角度) 单位：deg
取值正：顺时针 取值负：逆时针
transform-origin: 原点水平位置 原点垂直位置 （默认原点是盒子中心点）
取值：方位名词（left、top、right、bottom、center）
像素单位数值
百分比
Ⅲ.缩放
语法：transform:scale(x轴缩放倍数，y轴缩放倍数)
只设置一个值表示，x和y轴等比例缩放
大于1表示放大，小于1表示缩小
三、空间转换
属性：transform
形态：位移、旋转、缩放
Ⅰ.空间位移
语法：transform:translate3d(x,y,z)
transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)
取值：正负均可
Ⅱ.空间旋转
语法：transform:rotateX(值)
transform:rotateY(值)
transform:rotateZ(值)
transform:rotate3d(x,y,z,角度度数)
①设置自定义旋转轴的位置及旋转角度
②x、y、z取值为0~1之间的数字
判断旋转方向：使用左手法则
立体呈现
①使用transform-style:preserve-3d呈现立体图形（给父元素添加）
②按需求设置子盒子的位置（位移或旋转）
Ⅲ.空间缩放
语法：transform:scaleX(倍数)
transform:scaleY(倍数)
transform:scaleZ(倍数)
transform:scale3d(x,y,z)
四、过渡
谁要过渡给谁加transition属性
三要素：①有属性发生变化
②哪个属性需要执行过渡效果
③过渡效果持续时长
transition: transition-property transition-duration transition-timing-function transition-delay属性：
transition-property 过渡的css属性名称
transition-duration 花费时间 默认是0
transition-timing-function 过渡时间曲线 默认是ease
transition-delay 过渡延迟时间 默认是0
五、动画
定义动画
@keyframes 动画名称{
from{}
to{}
}@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}使用动画
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态;注意：
① 动画名称和动画时长必须赋值
② 取值不分先后顺序
③ 如果有两个时间值，第一个表示动画时长，第二个表示延迟时间
动画属性
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕状态 forwards:最后一帧状态 backwards:第一帧状态
animation-timing-function 速度曲线 steps(数字)：逐帧动画
animation-iteration-count 重复次数 infinite：无限循环
animation-direction 动画执行方向 alternate为反向
animation-play-state 暂停动画 paused:暂停 通常配合:hover使用
给一个元素添加多个动画效果 多个动画之间用逗号分隔
六、视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
iphone6/7/8 物理分辨率 750*1334 逻辑分辨率 375*667
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport:视口
width=device-width :视口宽度=设备宽度
initial-scale=1.0 :缩放1倍(不缩放)
七、布局
百分比布局(流式布局)
宽度自适应，高度固定
flex布局(弹性布局)
避免浮动脱标问题
设置方式：父元素添加display:flex 子元素可以自动挤压或拉伸
组成部分：弹性容器、弹性盒子、主轴、侧轴（交叉轴）
主轴对齐方式
justify-content: （添加到弹性容器）
flex-start 起点开始依次排列 默认值
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
侧轴对齐方式
align-items: （添加到弹性容器）
flex-start 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 弹性盒子沿主轴线被拉伸至铺满容器 默认值
主轴方向
主轴默认是水平方向，侧轴默认是垂直方向
flex-direction： row 水平(默认)
column 垂直
row-reverse 行，从右向左
column 列，从下到上
伸缩比： flex:值 取值是整数 只占父盒子剩余尺寸
弹性盒子换行： flex-wrap:wrap
调整行对齐方式：align-content 取值和justify-content基本相同
弹性盒子文字溢出省略号显示：
在flex:1的盒子中的设置overflow:hidden或者width:0;
文字样式设置overflow:hidden; white-space:nowrap; text-overflow:ellipsis
八、移动适配
1rem=1HTML字号大小
媒体查询能够检测视口宽度，然后编写差异化的css样式
当某个条件成立，执行对应的css样式
@media(媒体特性){
选择器{
css属性
}
}; @media (width:320px) {
html{
font-size: 32px;
}
}目前rem布局方案中，将网页等分成10份，html标签的字号为视口宽度的1/10
rem单位的尺寸=px单位数值/基准根字号
flexible.js 核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size
1vw=1/100视口宽度
1vh=1/100视口高度
vw单位的尺寸=px单位数值/(1/100视口宽度)
vh单位的尺寸=px单位数值/(1/100视口高度)
补充知识：
渐变
background-image: linear-gradient(
transparent,
rgba(0,0,0,.6)
);透视
使用perspective属性实现透视效果
属性（添加给父级）
perspective:值
数值：像素单位数值，数值一般在800-1200
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
