字体图标iconfont
方法1：link引入iconfont.css文件--添加类名class“iconfont icon-XXX"
方法2：使用字体图标- Unicode编码：l 引入样式表：iconfont.cssl 复制粘贴图标对应的Unicode编码 例：&#jiantou
平面转换transform
位移：transform: translate(水平移动距离, 垂直移动距离) X轴正向为右，Y轴正向为下
旋转：transform: rotate(角度) 角度单位是deg 取值为正, 则顺时针旋转 //取值为负, 则逆时针旋转
转换原点: transform-origin: 原点水平位置原点垂直位置 方位名词（left、top、right、bottom、center）
缩放：transform: scale(x轴缩放倍数, y轴缩放倍数） scale值大于1表示放大, scale值小于1表示缩小
渐变背景background-image
background-image：linear-gradient(方位/角度，颜色一，颜色二。。。)
动画
使用animation添加动画效果
1.定义动画
@keyframes 动画名称{ from{初始状态} to{终止状态} }
或@keyframes 动画名称{ o%{} 10%{} 15%{} 100%{} }
2.调用动画
animation:动画名称 动画花费时长 动画播放次数：infinite 无限次播放 动画播放方向：alternate 交替播放 速度曲线：默认 ease； linear 匀速播放；steps(数字)：逐帧动画 执行完毕时的状态：forwards 动画会停在动画结束时的状态 animation 里面属性值 不分先后顺序 animation-play-state:paused为暂停，通常配合：hover使用
注意：forwards不能和infinite结合使用，否则不生效 ， 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
flex布局
使用justify-content调节元素在主轴的对齐方式
*flex-start 默认值，起点开始依次排列
*flex-end 终点开始依次排列
*center 沿主轴居中排列
*space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
*space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
*space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
使用align-items调节元素在侧轴的对齐方式
l 修改侧轴对齐方式属性:align-items（添加到弹性容器）align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
*flex-start 默认值，起点开始依次排列
*flex-end 终点开始依次排列
*center 沿侧轴居中排列
*stretch 默认值，弹性盒子沿主轴线被拉伸至铺满容器
使用flex:值(取值范围为整数)； 修改弹性盒子伸缩比
使用flex-direction改变元素排列方向
主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction row-行，水平(默认值) column-列，垂直（修改后主轴是垂直方向）
使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示: flex-wrap: wrap; 调整行对齐方式：align-content值与justify-content基本相同
使用rem单位设置网页元素的尺寸
相对单位rem单位是相对于HTML标签的字号计算结果1rem = 1HTML字号大小
使用媒体查询设置差异化CSS样式
写法：@media(媒体特性-自己编){选择器{css属性}}
使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
写法 写在body底部：
能够使用Less变量设置属性值
语法：Ø 定义变量：@变量名: 值;Ø 使用变量：CSS属性：@变量名;
使用Less导入写法引用其他Less文件
导入: @import “文件路径”;
使用vw单位设置网页元素的尺寸
相对单位相对视口的尺寸计算结果vw：viewport width 1vw = 1/100视口宽度vh：viewport height1vh = 1/100视口高度
根据设备宽度的变化，设置差异化样式
媒体特性常用写法max-widthmin-width
使用BootStrap框架快速布局响应式网页
使用步骤
引入： BootStrap提供的CSS代码
调用类：使用BootStrap提供的样式Ø container：响应式布局版心类
使用BootStrap栅格系统布局响应式网页
栅格化是指将整个网页的宽度分成若干等份BootStrap3默认将网页分成12等份
超小屏幕 <768px col-xs-* 小屏幕768-992px col-sm-* 中等屏幕993-1200px col-md-* 大屏幕>1200px col-lg-*
使用BootStrap插件实现常见的交互效果
插件的使用步骤Ø 引入BootStrap样式Ø 引入js文件：jQuery.js + BootStrap.min.js