3D+ 动画+怪异盒子+弹性盒子小记

3D

transform：perspective（）；景深   视距  单位是px

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

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

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

rotate3d（0/1，0/1，0/1，旋转的角度）当数变成一的时候执行旋转

动画

首先先定义动画: @keyframes

动画名{ from{}to{}}

animation: 动画名

animation-name:mymove; 是用来定义一个动画的名称,mymove是由Keyframes创建的动画名 mymove要和Keyframes中的mymove一致

animation-duration 运动时间 默认是 0 s 

animation-delay 延迟时间 默认是 0 s

animation-timing-function 动画的播放方式，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier，steps（)；

animation-iteration-count 是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

animation-direction 定义是否应该轮流反向播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放

怪异盒模型

外边框：marght：100px auto 0   auto自动

Box-sizing：

   盒子尺寸：可以改变盒子模型的展示形态。

默认值：content-box：width、height →是内容的高度宽度content（内容）

Border-box：width、height→centent padding border=内容+内边+边框一起分宽高

1.盒子左右自适应是可以的，但是上下自适应是不行的

2.width、height步设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

弹性盒子

justify-content( 主轴对齐方式)

说明:

内容对齐(justify: content)属性应用在弹性容器上，控制伸缩项目在伸缩容器中的主轴(main axis)对齐方式

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

flex- end主轴末端对齐

center主轴居中对齐

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

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

space- evenly平均分配空白空间

flex-direction设置 主轴方向

row 默认横向一行内排列

row-reverse:反转模向排列(右对齐，从后往前排，最后-项排在最前面。

column:纵向排列。

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

flex-wrap换行的

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

nowrap:不换行

wrap:换行

wrap-reverse:反转换行排列。

align-content ：设置主轴的对齐方式【行与行之间的对齐方式】

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

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

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

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

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

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

space-evenly平均分配空白空间

align-items (侧轴对齐方式) 交叉轴的对齐方式

说明:

侧轴对齐方式:控制伸缩项目在伸缩容器中的侧轴对齐方式

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

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

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

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

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

align-self（加给子元素）

说明：

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

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

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

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

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

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

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

flex三个子属性介绍

flex-grow

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

flex-shrink

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

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

flex-basis

项目的主轴方向的长度