渐变，转换，过渡，动画，媒体查询和弹性布局

一、渐变

        1.渐变

                渐变：两种或者多种颜色之间的平稳过渡 -->

        2.渐变分类

                 backgroud-image

                线性渐变：linear-gradient    向下/向上/向左/向右/对角方向        to top

                径向渐变：radial-gradient    由圆心向四周发射        to top        deg

                                                                默认是椭圆的  ellipse 

                                                                圆形：circle

二、转换

        转换transform：n

              1.平移translate()：X轴：正右负左  Y轴：正下负上  Z轴：正外负里

              2.旋转rotate()：默认旋转中心是盒子的正中心： 正顺负逆

                 rotateX() 沿着X轴旋转

                  rotateY() 沿着Y轴旋转

              3.扭曲skew()： X轴：正左负右  Y轴：正下负上

              4.缩放拉伸scale()

eg：

        /* x轴,y轴       参数是倍数 */

                transform: scale(0.5, 2);

                /* 宽度的放大缩小 */

                transform: scaleX(0.1);

                /* 高度的放大缩小 */

                transform: scaleY(2);

                /* x轴,y轴    参数是倾斜的度数 */

                transform: skew(30deg, 20deg);

                transform: skewX(30deg);

                transform: skewY(-45deg);

                /*x轴,y轴    参数是平移的像素   */

                transform: translate(100px, 100px);

                transform: translateX(-100px);

                transform: translateY(-100px);

                transform: translateZ(400px);

三、过渡：元素从一种样式逐渐改变为另一种的效果

        实现过渡条件：

                1、设置过渡的CSS属性        transition-property

                2、设置过渡的时间周期        transition-duration

                3、过渡的时间速度曲线        transition-timing-function

                                                               ease:默认的 慢快慢     linear:匀速

                4、过渡的延迟                        transition-delay

        综合设置

                transition:CSS属性 周期 曲线 延迟

四、动画

          设置CSS3动画的过程

                  1、设置动画属性

                            动画的名称        animation-name

                            动画的周期        animation-duration

                            动画的时间速度曲线        animation-timing-function

                            动画的延迟        animation-delay

                            动画的次数        animation-iteration-count        infinite无限

                            动画的暂停        animation-play-state: paused;（给子集加个hover）

                  2、设置动画开始

                            @keyframes 动画名称

                                        既可用from to，也可用百分比（指时间）

                 3、animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal",         alternate 逆播放

五、媒体类型：screen电脑屏幕，平板电脑，智能手机

        @media only screen and (max-width:npx/min-width:npx){

              选择器:{

                      }

            }

         rem 相对单位 相当于根元素html字体的大小（取视口的1/10）
六、弹性布局（flex）        

1.容器：container，弹性布局的父元素        属性

          1、display:flex    表明了当前的容器是弹性父容器

          2、flex-direction:row（默认值） | row-reverse | column |column-reverse   设置项目排列方向（主轴的方向）

          3、justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly  设置项目在主轴方向上对齐方式

          4、align-items:stretch（默认值） | center  | flex-end | baseline | flex-start  设置项目在交叉轴方向上对齐方式

          5、flex-wrap:nowrap（默认值） | wrap | wrap-reverse     设置超出容器的项目是否换行

          6、align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly  设置项目换行的对齐方式

2.项目：item，弹性布局的子元素             属性

          1、order:设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数，默认是0。

          2、

          3、

          4、        

          5、

          6、align-self:设置项目在行中交叉轴方向上的对齐方式，

3.单词

          flex: v.  弯曲; 屈伸，活动(四肢或肌肉，尤指为准备体力活动);

          direction：n.  方向; 方位; 趋势; 动向; 方面; 目的; 用法说明; 管理; （电影导演的）指点，指示;

          reverse:v.  颠倒; 彻底转变; 使完全相反; 撤销，废除(决定、法律等); 使反转; 使次序颠倒; 交换（位置或功能）; 承认错误; （使）倒退行驶; 打对方付费的电话;

          justify:vt. 证明正当; 证明…正确(或正当、有理); 对…作出解释; 为…辩解(或辩护); 调整使全行排满; 使每行排齐; 使齐行;

4.主轴：默认是水平方向

      交叉轴：垂直主轴

5.

任何一个容器都可以指定为Flex布局。

 * .box{display:flex;}

 * 行内元素也可以使用Flex布局

 * .box{display:inline-flex;}

 * Webkit内核的浏览器，必须加上-webkit前缀。

 * .box{

 *  display:-webkit-flex;

 *  display:flex;

 * }

 * 注意，设为Flex布局以后，子元素的float，clear和vertical-align属性失效。

 * 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的

 * 所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

 * 容器的属性

 * flex-direction属性决定主轴的方向（即项目的排列方向）。row | row-reverse | column | column-reverse;

   flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 nowrap | wrap | wrap-reverse;

   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。<flex-direction> || <flex-wrap>;

   justify-content属性定义了项目在主轴上的对齐方式。flex-start | flex-end | center | space-between | space-around;

   align-items属性定义项目在交叉轴上如何对齐。flex-start | flex-end | center | baseline | stretch;

   align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | flex-end | center | space-between | space-around | stretch;

 * 项目的属性

 * order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。值为<integer>;

   flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。值为<number>

   flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。值为<number>

   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。值为<length>

   flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

   align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。auto | flex-start | flex-end | center | baseline | stretch;