T-CSS核心-day02-css hack、转换、过渡、动画、优化

二.弹性布局（重点）

1. 什么是弹性布局
   主要解决某个元素中，子元素（仅仅是子元素不是后代元素）的布局方式
   为布局提供非常大的灵活性
2. 弹性布局的相关概念
   1. 容器
      要发生弹性布局的子元素的父元素叫做容器
      即：定义了display：flex;的元素
   2. 项目
      要发生弹性布局的子元素们叫做项目
      即：定义了display: flex的元素的儿子们
   3. 主轴(4条)–x轴正负方向，y轴正负方向
      项目们的排列方向，称之为主轴
      项目们在主轴上的排列顺序，称为主轴的起点和终点
      例：x轴正方向称为：主轴方向x轴，主轴起点-左侧，主轴重点-右侧
   4. 交叉轴(2条)–x轴正方向，y轴负方向
      永远与主轴垂直的方向
      项目们在交叉轴上的排列，称为交叉轴的起点和终点
      
      以图中3个元素为例：3个子元素做弹性布局，主轴方向x轴，主轴起点-左侧，交叉轴y轴，在交叉轴的终点对齐
3. 语法
   设置弹性容器
   display：
   取值：
   flex; 把块级变为弹性容器
   inline-flex; 将行内元素变为弹性容器
   注意：
   1. 当一个元素设置为容器之后，这个容器的text-align，vertical-align失效，项目没失效
   2. 当元素变为弹性项目时（即父元素设置了display:flex），这个弹性项目float，clear失效
4. 容器的样式属性
   1. 设置主轴的方向
      flex-direction:
      取值：
      row 默认值，主轴为x，主轴起点在左侧
      row-reverse 主轴为x，主轴起点在右
      column 主轴为y，主轴起点在顶部
      column-reverse 主轴为y，主轴起点在底部
   2. 设置项目换行
      当容器在主轴方向，空间不够时，用来设置项目是否换行
      flex-wrap:
      取值：
      no-wrap; ： 默认值，不换行(项目压缩)
      wrap; ：换行
      wrap-reverse; ：反转换行
   3. 上面两个属性的简写方式
      flex-flow: 主轴方向 换行;
   4. 定义项目在主轴上对齐方式
      justify-content:
flex-start;： 默认值，主轴起点对齐
      center;： 主轴的中间对齐
      flex-end;： 主轴终点对齐
      space-around;： 每个项目左右外边距相同 (两端有空间)
      
      space-between;： 每个项目之间间距相同，两端对齐(两端没有空间)
      
   5. 交叉轴对齐方式
      align-items:
      取值：
      flex-start 交叉轴起点
      center 中间
      flex-end 交叉轴终点
      baseline 每个项目的文本，基线对齐（很少用）
      stretch 前提，是项目(不是容器)在交叉轴方向不写尺寸，项目充满交叉轴
      
5. 项目的样式属性
   只能设置在一个项目上，不影响其他项目

   1. 单独设置一个项目交叉轴对齐方式
      align-self:
      取值：
      flex-start 交叉轴起点
      center 中间
      flex-end 交叉轴终点
      baseline 每个项目的文本，基线对齐（很少用）
      stretch 前提，是项目(不是容器)在交叉轴方向不写尺寸，项目充满交叉轴
      auto 使用容器align-items定义的值

   2. 设置项目在主轴的排列顺序
      order:取值为无单位数字，默认值为0。值越小，离主轴起点越近！

   3. 项目缩小
      当主轴空间不够时，项目是否缩小，怎么缩小
      flex-shrink:取值为不带单位的数字
      默认值：1；
      取值规则，子元素总溢出宽度，根据flex-shrink取值，按比例*总溢出宽度，分配给各个项目做缩小(减法)。
      举例：
      为父元素命名为div0，1-5五个子元素分别命名为div1、div2、…、div5。
      父元素需要设定：

      display：flex，width：500px

      所有子元素需要设定：

      flex-basis：120px; 即不发生收缩时子元素原本的宽度

      以上为先决条件。子元素宽度之和与父元素宽度的差值：

      120*5-500=100px

      这时通过设定子元素的flex-shrink属性来决定100px总缩减量如何分配给5个子元素。
      预设:

      前三个div设置flex-shrink: 1;
      后两个div设置flex-shrink: 2;

      div1占总收缩比例的1/7，所以div1需要被移除的溢出量为

      100*(1/7)≈14px

      则，最后div1的实际宽度为

      120-14=106px

   4. 项目放大
      当主轴空间过大，项目是否放大，怎么放大
      flex-grow:取值为不带单位的数字
      默认值：0；
      取值规则，多出的空间，按照取值，分配给各个项目进行放大(相加)

   5. 项目的样式属性（重要属性）

      1. flex-basis
         单独设置每个项目在主轴上的占据空间（不管主轴是x,还是y）
         flex-basis:
         取值①% 容器主轴方向尺寸的百分比；②px固定数字
         注意，定义了flex-basis，优先级高于项目本身宽高
      2. 简写方式
         是flex-grow、flex-shrink、flex-basis 的简写
         flex:0 1 25%;

三.CSS hack

由于不同的浏览器对css的解析不同，会导致同一份css在不同浏览器生成不同的效果
开发人员需要针对不同浏览器写不同的css
这个行为，就叫做写css hack
-webkit-谷歌的
-o-欧朋的
-ms-微软的
-moz-火狐的

四.转换（重点）

1. 什么是转换
   改变元素在页面中的位置，大小，角度，以及形状
   2D转换：只在x轴和y轴上发生转换效果
   3D转换：增加了z轴的效果。但是3D都是模拟的！
2. 转换属性
   transform:转换函数;
3. 2D转换
   1. 位移(改变元素在页面中的位置)
      transform: translate()
      转换函数
      1. translate(x)和translateX(x) 设置元素在x轴上位移的距离：取正数元素→移 ，取负数元素←移
      2. translateY(y) 设置元素在y轴上位移的距离：取正数元素↓移 ，取负数元素 ↑移
      3. translate(x,y) 同时设置x和y轴位移距离

      ---

      面试题
      要求一个200px*200px的div，不管浏览器多大，都在浏览器正中心显示

      	div{
      		width: 200px;height: 200px;
      		background: #000;
      		position: absolute;
      		top: 50%;left: 50%;
      		transform: translate(-100px,-100px);
      	}
      

      ---

   2. 缩放(改变元素的大小)
      transform：scale()
      取值
      1. 参数为一个值 scale(v1) 同时设置x轴和y轴的缩放倍数
         v1>1 x轴和y轴都放大倍数
         0 -1 v1<-1 x轴和y轴都放大,并反转
      2. 参数为两个值，分别设置x轴和y轴的缩放
      3. 单独设置x轴缩放 scalex()
      4. 单独设置y轴缩放 scaley()
   3. 旋转(改变元素的角度)
      transform:rotate(ndeg);
      n取值：正–顺时针， 负–逆时针
      注意：
      1. 旋转原点会影响旋转效果
         transform-origin:x y
         取值
         ①以px为单位的数字
         ②%
         ③关键字 x(left/center/right)；y(top/center/bottom)
      2. 旋转与位移的配合，注意旋转会带着坐标轴一起转，位移是在旋转之后的坐标方向位移
         
   4. 倾斜（项目中用的较少）
      1. skewX(ndeg)和skew()
         让y轴向着x轴倾斜n度
         n:正数 逆时针 负数 顺时针
         
      2. skewY(ndeg)
         让x轴向着y轴倾斜n度
         n:正数 顺时针， 负数 逆时针
         
      3. 同时设置x轴和y轴的倾斜

         ---

         练习
         在一个transform属性中，写多个转换函数
         div 200*200.背景随意，鼠标悬停时，该元素发生以下效果
         向右偏移100px,向下偏移100px，旋转135deg,向着x轴倾斜78度，放大1.5倍

         ---

4. 3D转换（3D旋转）
   页面中所有的3D转换都是模拟的
   1. 透视距离
      模拟人眼到3d转换元素之间的距离，
      距离不同，效果不同
      perspective:透视距离：此属性要加载到3D转换元素的父元素上
   2. 3D转换
      transform:
      取值：
      1. rotateX(xdeg)
         以x轴为中心轴，旋转元素（现实中烤羊腿，老式爆米花机的旋转方式）
         2 rotateY(ydeg)
         以y轴为中心轴，旋转元素(现实中旋转门，旋转木马，钢管舞，土耳其烤肉的旋转方式)
      2. rotateZ(zdeg)
         以z轴为中心轴，旋转元素角度(现实中风扇，大风车，摩天轮的旋转方式)
      3. 3D旋转 rotate3D(x,y,z,ndeg)
         x,y,z 取值为不带单位的数字。0 代表不参与。其他数字代表角度的倍数。负数代表反方向转

五.过渡（重点）

1. 什么是过渡
   让css的值，在一段时间平缓变化的效果
2. 语法
   1. 指定参与过渡的属性
      transition-property:
      取值
      ①一个或多个css属性，多个属性间用空格分开(写或者不写transform属性，该属性都参与过渡)
      ②all 所有支持过渡的属性
      支持过渡的属性
      1. 颜色属性
      2. 大多数取值为具体数字的属性
      3. 阴影
      4. 转换
   2. 设置过渡持续时长
      transition-duration: s/ms;
   3. 过渡时间曲线函数
      transition-timing-function:
      取值：
      1. 贝塞尔曲线(自学) cubic-bezier(0,0,1,1)
      2. ease 默认值，慢速开始，加速，减速，慢速结束
      3. linear 匀速
      4. ease-in 慢速开始，一直加速
      5. ease-out 快速开始，减速结束
      6. ease-in-out 慢速开始，先剧烈加速，再剧烈减速，慢速结束
   4. 过渡前的延迟时间
      transition-delay: s/ms
   5. 过渡代码的编写位置
      过渡写在原始样式中，过渡效果，有去有回
      过渡写在伪类hover中，过渡效果，有去无回
   6. 过渡的简写方式
      transition: property duration timgin-function delay;
      最简方式：transition: duration;

      ---

      练习：1.翻滚吧球 2.魔力转圈圈

      ---

      PS:过渡和动画的使用区分

      过渡	动画
      两个css值之间的变化	至少两个，或者两个以上css值之间的变化
      必须使用伪类激活	可以使用刷新页面激活，也可以使用伪类

六.动画（重点）

1. 什么是动画
   使元素从一种样式逐渐变为另外一种样式
   就是过渡的升级，将多个过渡效果放到一起
2. 使用关键帧来控制动画每一个状态
   关键帧的组成：
   1. 这一帧执行的时间点
   2. 这一帧的样式
3. 动画的使用步骤
   1. 使用关键帧，来定义动画
      @keyframes 动画名称{ 0%/from{样式} ..... 100%/to{样式} }
      举例：

      /* 1.定义动画 */
      @keyframes change{
          0%{
              background-color: #00f;
              border-radius: 0;
          }
          50%{
              background-color: #f00;
              border-radius: 50%;
          }
          100%{
              background-color: #afa;
              border-radius: 0;
          }
      }
      

   2. 调用定义好的动画
      1. 指定调用动画的名称
         animation-name:动画名称;
      2. 指定动画播放时长
         animation-duration: s/ms;
      3. 设置动画的时间曲线函数
         animation-timing-function:
         取值:
         ease
linear
ease-in
ease-out
ease-in-out
贝塞尔曲线
      4. 设置动画的延迟
         animation-delay: s/ms
4. 动画的其他属性
   1. 设置动画的播放次数
      animation-iteration-count:
      取值：
      具体的数字
      infinite 无限
   2. 定义关键帧的播放顺序
      animation-direction:
normal ：0%—>100%
      reverse ：100%–>0%
      alternate： 轮流播放，奇数次正向，偶数次逆向
   3. 动画简写
      animation: name duration timing-function delay count direction;
      最简方式 animation:name duration;
   4. 动画的填充状态
      animation-fill-mode
      取值：
      none ：默认值，不填充
      backwards： 动画的延迟时间内，填充第一帧
      forwards ： 动画结束后，填充最后一帧
      both ：前后都填充
   5. 设置动画的播放状态
      animation-play-state:
      取值：
      paused：暂停
      running：播放
5. 动画的兼容性
   如果低版本浏览器兼容动画效果，需要在声明动画的时候，添加前缀
   正常写动画：@keyframes 动画名称{}
   添加兼容的写动画：
   @-webkit-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-ms-keyframes 动画名称{}

   ---

   练习:坤坤打篮球

   ---

6. 动画的第三方包使用
   animate.css的使用
   https://daneden.github.io/animate.css/下载animate.css文件
   在页面中使用link引入这个css
   在样式中直接调用动画名称

七.css优化

1. css优化的目的
   减少服务器端压力
   提升用户体验
2. css优化的原则
   尽量减少http的请求个数（缓存，精灵图）
   页面的顶部引入css文件
   将css和js文件，放在独立的文件中
3. css代码优化
   合并样式(能简写，就不单独写)
   减少样式重写(能重用就重用)
   避免出现空的href和src
   代码压缩

八.css reset和normalize.css

1. 什么是css reset
   由于不同浏览器，给元素定义的默认样式不同，导致一份css有可能产生不同的效果。为了统一，在开发之前，我们把所有有差异的默认样式，清除或统一
   css reset没有标准，项目中使用哪个版本，听领导安排
   注意：css reset存在的问题：css reset 比较霸道，不管是不是违背语义，都要把样式清除和统一
2. normalize.css
   他是css reset一种替代方案，比较温和
   他在默认的html元素的样式上，提供跨浏览器的高度一致性，还修改了不同浏览器的bug