3D、动画和弹性盒子

 一、3D

       translateZ() 往Z轴移动  scaleZ() 沿着Z轴缩放 rotateZ()

        translate3d(X轴位移的距离,y轴位移的距离,z轴位移的距离)

        scale3d(x轴缩放的大小,y缩放的大小,z轴缩放的大小)

        rotate3d(0/1,0/1,0/1,旋转角度)

        当功能函数的变量值为1时执行旋转度数

二、动画

        首先先定义动画:@keyframes 动画名{ from{}to{}//25%{}......100%{}}

        animation：动画名 动画执行的时间 延迟时间  播放方式  播放次数  是否反向播放

animation和transition的区别？

相同点：都是随着时间改变元素的属性值。

不同点：

transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；

而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

三、怪异盒子

        box-sizing:border-box 怪异盒模型  怪在：不会因为padding和border而改变盒子的大小【不能超过盒子本身的大小（padding+border<1/2盒子的大小）】

 border-box(按怪异盒模型的规则解析)

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

四、弹性盒子

布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

display：flex/inline-flex【在父级元素上设置】

             flex： 将对象作为弹性伸缩盒显示

             inline-flex：将对象作为内联块级弹性伸缩盒显示

1）flex-direction  设置主轴方向

        row  默认横向一行内排列

        row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

        column：纵向排列。

        column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

 2) justify-content（主轴对齐方式）

         ■ flex-start默认值，主轴顶端对齐

         ■ flex-end主轴末端对齐

         ■ center主轴居中对齐

         ■ space-between在主轴两端对齐，中间自动分配

         ■ space-around在主轴自动分配空白空间

         ■ space-evenly平均分配空白空间

  3) align-items  交叉轴 / 侧轴对齐方式：控制伸缩项目在伸缩容器中的侧轴对齐方式

        flex-start：弹性盒子元素在伸缩容器里延侧轴顶端对齐。

        flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐。

        center：弹性盒子元素在伸缩容器里延侧轴居中对齐。

        baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐。

        stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。

  4) flex-wrap  换行的

        说明：

        该属性控制伸缩容器当内容超出容器的尺寸时是否换行，同时侧轴的方向决定了新行堆叠的方向。

        nowrap：不换行

        wrap：换行

        wrap-reverse：反转换行排列。

    5)  align-content: 设置多主轴的对齐方式【行与行之间的对齐方式】

          ■ flex-start行和行在侧轴顶端对齐，没有行间距

          ■ flex-end行和行在侧轴顶端对末端对齐，没有行间距

          ■ center行和行在侧轴居中对齐，没有行间距

          ■ space-between行和行两端对齐，中间自动分配侧轴剩余空间。

          ■ space-around行和行自动分配侧轴剩余空间。

          ■  stretch  默认值。行和行补强制拉伸以适应容器侧轴的长度。

          ■ space-evenly平均分配空白空间

说明：

     6) align-self（加给子元素）

            align-self 属性规定灵活容器内被选中项目的侧轴对齐方式。

           注意：align-self 属性可重写灵活容器的 align-items 属性。

             auto   默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则  为 "stretch"。

              Stretch  元素被拉伸以适应容器侧轴的尺寸。

              Center  元素位于容器侧轴的中心。

              flex-start   元素位于容器的侧轴顶端。

              flex-end      元素位于容器侧轴的末端

  7) flex三个子属性介绍

                flex-grow

               定义项目的放大比例，默认为0，即如果存在剩余空间也不放大

               flex-shrink

                定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。

                收缩量的计算方式：（元素宽度*收缩比例/元素*收比例    相加）*溢出宽度

                flex-basis：项目的主轴方向的长度

                flex（flex-grow，flex-shrink、flex-basis）

                order：排列顺序。

        说明：复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。

         缩写「flex: 1」, 则其计算值为「1   1   %」

         缩写「flex: auto」, 则其计算值为「1   1   auto」

         flex: none」, 则其计算值为「0   0  auto」

         flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

用弹性盒子实现案例：