• 字体图标 图标库：https://www.iconfont.cn/ (阿里)
  • 引入方式1 —本地文件
    1. fonts← iconfont四个文件夹(复制)
    2. ; 将字体引入网页头部css文件;
    3. ; iconfont是图标的font-family属性,icon-xxx对应具体使用的图标；
  • 引入方式2 —在线文件链接
    1. 在图标库项目中生成在线链接： at.alicdn/t/font_xxxx.css;
    2. ;将在线链接引入页面
    3. ; 用类名引用字体图标 ★； &#ex8d0 ; 用unicode编码引用图标；
  • 引入方式3 —伪元素
    1. .car::after{ content:“\e7b2”};
    2. 在伪元素父盒子里.car上添加类名iconfont;
• 2D平面转换—transform margin移动盒会挤出其他盒子； transform移动不影响其他盒子的布局； 应用场景：如轮播图动画；
  • 位移 transform:translate(x轴距离,y轴距) transform:translateX/Y(50%)； (移动距离百分比为盒子本身宽度/高度的50%) ★ 对于行业元素，如span无效;
  • 旋转 transform:rotate(45deg); (正顺时针，负逆时针旋转45°)； transform-origin:x y; (默认设置旋转中心点(50%) 50%)，还可以设置像素/方位名词)；
  • 缩放 transform:scale(x轴倍数,y轴倍数); transform:scale(2); 整体放大一倍； transform-origin:x y;(改缩放中心点)
  • 综合多变写法 transform:translate (150px,50px) rotate(180deg) scale(1.2) (顺序不同，转换效果不同)
  • 渐变 background-image:linear-gradient { to bottom, 颜色1,颜色2 }; 渐变方向可设置为第一个参数；
• 3D空间转换
  • 3D空间 (都是添加到父级盒子中的属性) perspective:值； (透视值一般在800~1200之间) transform-style:preserve-3d;
  • 位移 transform:translate3d(x,y,z); transform:translateX/Y/Z(100px); (x,y轴移动可用px或%; z轴在屏幕外，单位一般使用px,近大远小近清远模糊)；
  • 旋转 transform:rotateX/Y/Z(45deg); transform:rotate3d(x,y,z,角度)；
• 动画
  • 优点：无需鼠标触发即可自动触发 一些动画反复执行；

  • 定义动画 @keyframes 动画名称 { 0%/from { } 100%/to { } }

  • 调用动画 animation-name: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完成时的状态；

  • 动画暂停鼠标 animation-play-state:paused;

  • 多组动画(逗号分开) animation:run 2s stps(12) infinite,move 5s linear forwards;

• 常见的移动布局方案
  • 单独制作移动终端页面
    • 流式布局(百分比布局)；
    • flex弹性布局 ★
    • rem布局 ( 媒体查询 less)；
  • 响应页与移动终端兼容 (开发成本高，需要协调兼容性； 用的不多)
    • bootstarp(响应式框架)；
• 流式布局(百分比布局) ← 逐渐淘汰? 有些盒子的宽度可以用百分比来表示，还有许多其他的布局模式和PC端类似；
• flex布局(弹性布局) ★
  • 案例:兔子鲜儿个人中心页面PC
  • flex布局特点
    1. 宽度和高度可以直接设置无需区分块元素、行内元素和行内块元素；
    2. flex盒子在模式下不脱标，不需要去除浮动；
    3. flex布局原理：添加父盒flex控制子元素排列的属性；
  • flex父元素属性
    • display:flex; (添加上一级父盒，亲爸爸)
    • 父盒设置时flex布局后，子元素float、clear、vertical-align失效;

rem布局的意义 流式布局和flex布局只实现宽度适配,无法解决高度适配的问题;

• 案例：腾讯首页
  • 开发成本高,要协调兼容性问题; 重点：“学习使用UI框架”,后面还有更好用的框架 饿了么和vant;
  • 媒体查询 根据设备宽度的变化,设置差异化样式; min-width (从小到大写) max-width (从大到小写)
    • 语法 @media 关键词 媒体类型 and (媒体特性) { css代码 }
    • 设备尺寸划分

样式调用
<link rel="stylesheet" href="./css/pad.css" media="(min-width:768px)">
大于768px宽度时,调用pad.css;

• Bootstrap开发框架 【UI框架】将常见效果封装后形成的一套代码; 【BootStrap】Twitter公司开发维护,稳定性高;
  • Bootstrap栅格系统
    1. 在html中引入bootstrap.css;
    2. 内部预设了normalize(增强浏览器表现一致性),不需要单独引入;
    3. 通过改变元素类名提取相关样式;
    4. 栅格系统默认将网页横向分成12等份;

• 列偏移

     <div class="col-lg-3">左侧</div>
     <div class="col-lg-5 col-lg-offset-4">右侧</div>
     (将右侧盒子向右移动4格)
  

• 列嵌套 从父盒子的角度,又划分成12等份给里面的子盒子;