过渡动画、弹性盒子、calc计算函数

一、过渡动画

过渡动画需要触发才能执行

• transition-property 参与过渡的属性

参与过渡的属性   如果不写 默认是all
transition-property:width,height,background;  //如果有多个参与过渡的属性，中间用逗号隔开
transition-property: all;  all 代表所有属性都参与过渡
​

• transition-duration 过渡的完成时间

 
/* 过渡的完成时间  s秒  ms毫秒   1s=1000ms*/  必填
 transition-duration:5s;

• 过渡代码的位置

​
如果希望只有划入时有过渡，那就把过渡属性写在hover里
​
如果希望划入和滑出都有，那就把过渡属性写到盒子本身
​

• transition-timing-function 过渡的执行速度

​
 transition-timing-function:ease;  默认速度  下图5个速度是自带的五个值  linear匀速
 transition-timing-function: cubic-bezier(0,1.9,1,-1.07);可以自定义速度
 贝塞尔曲线官网：https://cubic-bezier.com/#0,1.9,1,-1.07

• transition-delay 过渡的延迟时间

  transition-delay:2s;

  说明：这些属性都可以写多个值，和过渡的属性一一对应

              transition-property:height,background,width;
              transition-duration:4s,1s,2s;
              transition-timing-function:ease,linear,cubic-bezier(0,1.9,1,-1.07);

• 复合写法

              /* transition:参与过渡属性 过渡的完成时间 过渡的执行速度 过渡的延迟时间; */
              transition:all 2s linear 0s;  所有属性具有相同的过渡效果
              transition: width 1s linear 0s,height 3s cubic-bezier(0,1.9,1,-1.07) 1s,background 2s linear;  单独给某些属性设置不同的过渡效果

• display、visibility 不能参与过渡

   display  visibility
          
   两种状态 要么显示block 要么隐藏none

二、“弹性”盒子

弹性盒子是css3新增的，对于ie低版本（ie9以下）有兼容问题。但是ie低版本22年6.16就不能用了。兼容问题不在。

网页布局发展

第一代 table表格 布局 （比如 蓝色理想网站）

第二代 div+css 布局

第三代 弹性盒子布局

第四代 网格布局

2.1 在父元素身上的属性

• 声明弹性盒子

   /* 声明弹性盒子 */
     display: flex / inline-flex;  flex是盒子以块级形式展现  inline-flex  以行内块形式展现

• 主轴的排列方式 （默认是横轴） justify-content

justify-content：flex-start;  子元素从开始位置排列
justify-content：flex-end；	子元素从结束位置排列
justify-content：center；     子元素从中间排列
justify-content：space-between； 两端对齐
justify-content：space-around; 每个盒子两边的间距一样（两个盒子中间有双倍间距）
justify-content：space-evenly；盒子中间的间距都一样大

• 主轴的方向 （默认是横轴）

 flex-direction:row;  横轴 （排列时是从左到右）默认值
 flex-direction:row-reverse; 横轴 （排列时从右往左）
 
 flex-direction:column; 竖轴 （排列时从上到下）
 flex-direction:column-reverse; 竖轴 （排列时从下到上）

• 交叉轴的排列方式（默认是竖轴，可以通过方向改成x轴）

align-items:stretch;  默认值  子元素的高度默认拉满（前提：子元素不固定高度）
align-items:flex-start; 不改变方向的前提下，最上边显示 （常用）
align-items:flex-end;不改变方向的前提下，最下边显示
align-items:center;不改变方向的前提下，最中间显示  （常用）
align-items:baseline; 基线对齐 （盒子里的文字大小都不一致可以看到效果）

• 超出父元素宽度换行

flex-wrap:wrap;  换行
flex-wrap:nowrap; 不换行（默认值）

• 多行的排列方式

align-content:flex-start;  所有行从最上边显示
align-content:flex-end;   所有行从最下边显示
align-content:center;    所有行从最中间显示
align-content:space-between;  多行的两端对齐
align-content:space-around;   每一行上下有相同的间距（行和行之间有双倍间距）
align-content:space-evenly;  每一行的间距都一样

2.2 在子元素身上的属性

• 子元素的排序 order

order:1;
     /* 子元素排序 */
        .box div:nth-child(1){
            /* 默认是0  值越大越靠后 */
            order: 2;
        }
        .box div:nth-child(2){
            /* 默认是0  值越大越靠后 */
            order: 1;
        }

• 单个子元素在交叉轴的对齐方式 align-self

align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:stretch;  
align-self:baseline;  
属性值和上边align-items 一样 意思也一样

• 子元素的放大 flex-grow 默认是0 不放大

  子元素的宽度之和小于父元素的宽

        .box div:nth-child(1){
            /* 变大某个子元素  根据剩余空间变大 */

            /* 空隙100px   3份  1份是33.333px*/
            /* 大盒子是700  小盒子总宽500  
               200 空隙    200/6=33.333 一份33.3333
            */
            /* flex-grow:2; 133.333 */
        }
        .box div:nth-child(2){
            /* 默认是0  值越大越靠后 */
            /* order: 1; */

            /* flex-grow:1; 166.666 */
        }

        .box div:nth-child(3){
            /* flex-grow: 3; */
        }

• 子元素的缩小 默认是1

子元素的宽度之和大于父元素的宽

flex-shrink:0;  代表元素不缩小

     /* 父元素的宽500  子元素之和800  少了300 
               份数 11   一份  300/11 = 27.27 
      */
flex-shrink:2;  /*100-2*27.27=45.46*/