移动端-弹性盒子

3D转换

translateZ()    往Z轴移动

scaleZ()     沿着Z轴缩放

rotateZ()   沿着Z轴旋转     

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

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

rotate3d(0/1,0/1,0/1,旋转角度)
当功能函数的变量值为1时执行旋转度数

transform ：perspective(200px)  为 3D 转换元素定义透视视图

backface-visibility属性

backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

语法：backface-visibility: visible | hidden

visible：为backface-visibility的默认值，表示反面可见

hidden：表示反面不可见

CSS中 animation动画 属性
个数	属性	说明
1	animation-name:mymove;	是用来定义一个动画的名称,mymove是由Keyframes创建的动画名 mymove要和Keyframes中的mymove一致
2	animation-duration	运动时间 默认是 0 s
3	animation-delay	延迟时间 默认是 0 s
4	animation-timing-function	动画的播放方式，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier，steps（)；
5	animation-iteration-count	是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
6	animation-direction	定义是否应该轮流反向播放动画。 如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放

 animation: 动画名 动画执行的时间 循环次数 播放方式 

首先先定义动画:

@keyframes 动画名{ 

        from{}

        to{}

}

弹性盒子水平布局

语法

        justify-content

属性值

        flex-start默认值，主轴顶端对齐
        flex-end主轴末端对齐
        center主轴居中对齐
        space- between在主轴两端对齐，中间自动分配
        space- around在主轴自动分配空白空间
        space-evenly平均分配空白空间

弹性盒子垂直布局（多行）

语法

        align-content

属性值

        flex-start行和行在侧轴顶端对齐，没有行间距
        flex-end行和行在侧轴顶端对未端对齐，没有行间距
        center行和行在侧轴居中对齐，没有行间距
        space- between行和行两端对齐，中间自动分配侧轴剩余空间。
        space-around行和行自动分配侧轴剩余空间。
        stretch默认值。 行和行补强制拉伸以适应容器侧轴的长度。
        space-evenly平均分配空白空间

换行

语法

        flex-warp

属性值

        nowrap:不换行
        wrap:换行
        wrap-reverse:反转换行排列

弹性盒子垂直布局（单行）

语法

        align-items

属性值

        flex-start:弹性盒子元素在伸缩容器里延侧轴顶端对齐。
        flex-end:弹性盒子元素在伸缩容器里延侧轴末端对齐。
        center:弹性盒子元素在伸缩容器里延侧轴居中对齐。
        baseline:弹性盒子元素在伸缩容器里延侧轴基线对齐。
        stretch:默认值        项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。

弹性盒子子项垂直布局

语法

        align-self

属性值

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

         center:元素位于容器的中心。

        flex-start:元素位于容器的开头。侧轴   当父元素纵向排列，则为横轴

        flex-end:元素位于容器的结尾。侧轴   当父元素纵向排列，则为横轴

怪盒模型 

语法

box-sizing

属性值

border-box

将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值

弹性盒子元素方向

语法

        flex-direction

属性

        flex-direction设置 主轴方向
        row默认横向一行内排列
        row-reverse:反转横向排列(右对齐，从后往前排，最后一项排在最前面。
        column:纵向排列
        column-reverse:反转纵向排列，从下往上排，最后一项排在最上面

flex三个子属性介绍

 CSS多列

盒模型

标准盒模型
    width和height是内容区域
怪异盒模型
    width和height是把border和padding包含在内
box-sizing:content-box默认值标准盒模型,border-box怪异盒模型;

弹性盒

父容器的属性
    1.display:flex/inline-flex;
        flex将对象作为弹性伸缩盒显示
        inline-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(侧轴对齐方式)
        flex-start 侧轴起始边界
        flex-end 侧轴结束边界
        center 居中放置
        baseline 基线对齐
        stretch 默认值，项目被拉伸以适应容器
    5.flex-wrap设置换行
        nowrap 容器为单行，该情况下子项可能会溢出容器
        wrap 容器为多行，子项内部会发生断行
        wrap-reverse 反转排列
    6.align-content(行与行之间对齐方式)
        flex-start 没有行间距
        flex-end 底对齐没有行间距
        center 居中没有行间距
        space-between 两端对齐，中间自动分配
        space-around 自动分配距离
        stretch 默认值，项目被拉伸以适应容器(前提是子元素不能设置高度)
子容器的属性
    1.align-self 灵活容器内被选中项目的对齐方式
        --可重写灵活容器的align-items属性
        auto 默认值，元素继承了它的父容器的align-items属性
        stretch 元素被拉伸以适应容器
        center 元素位于容器的中心
        flex-start 元素位于容器的开头
        flex-end 元素位于容器的结尾
    2.order 排序优先级
        数字越大越往后排，默认为0，支持负数
    3.flex-grow 项目的放大比例，默认值为0
        对未被占据的空间进行分配
    4.flex-shrink 项目的缩小比例
        flex-shrink: 0;代表元素不压缩
    5.flex-basis 项目的长度
    6.flex为345的简写形式
        默认值flex:0 1 auto;

多列

        column-count列数
        column-gap间距
        column-rule:2px dashed yellow ;线型
       作用是防止元素内部折断
            break-inside: avoid;