目录
5.3.1 flex-direction属性（主轴的方向 即项目的排列方向）
5.3.3 justify-content属性（主轴上的对齐方式）
一. css3结构性伪类选择器（重点）
:nth-child(n) 对指定序号的子元素设置样式（从前往后数）。
参数可以是数字（1、2、3）、
关键字（odd、even）、
公式（2n、2n+3 :使用公式时,n从0开始），
参数的索引起始值时1，而不是0。
:nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。
:nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。
二. 过渡(CSS3) transition
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 | css |
| transition | 简写属性，用于在一个属性中设置四个过渡属性 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
>如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
三. 2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
3.1 移动 translate(x, y)
translate 移动平移的意思
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
<style>
.box {
width: 200px;
height: 100px;
background-color: aqua;
margin: 100px auto;
transition: all 1s;
}
.box:hover {
/* transform: translate(50px, 50px); */
transform: translate(-50px);
}
</style>
3.2 缩放 scale(x, y)
缩小:[0,1)
1不变大也不缩小
扩大:(1,+正无穷)
若只书写一个值,那么x和y方向都是这个值
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
<style>
.box {
width: 200px;
height: 100px;
background-color: aqua;
transition: all 1s;
margin: 100px auto;
}
.box:hover {
transform: scale(1.1);
}
</style>
3.3 旋转 rotate(deg)
rotate(*angle*) 定义 2D 旋转，在参数中规定角度。
可以对元素进行旋转，正值为顺时针，负值为逆时针；
<style>
.box {
width: 200px;
height: 100px;
background-color: aqua;
transition: all 1s;
margin: 100px auto;
}
.box:hover {
/* 可以对元素进行旋转,正值为顺时针,赋值为逆时针 */
transform: rotate(-360deg);
}
</style>
四. 动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
4.1 定义动画
@keyframes 动画名称 {
from{ 开始位置 }
to{ 结束 }
}
或
@keyframes 动画名称 {
0%
55%
....
100%
}
4.2 调用动画
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
animation: move 2s linear;
animation-iteration-count:infinite; 无限循环播放
alternate-reverse;(动画反向交替运行)
animation-fill-mode: forwards(动画完成后,保持最后状态);
五. flex 布局
5.1. Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
.box {
display: flex;
}
5.2 基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
总结原理：就是给父盒子添加flex属性，来控制子盒子的位置和排列方式
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做()main end)；交叉轴的开始位置叫做(cross start)，结束位置叫做(cross end)。
5.3容器的属性
5.3.1 flex-direction属性（主轴的方向 即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
| row（默认值） | 主轴为水平方向，起点在左端。 |
| row-reverse | 主轴为水平方向，起点在右端。 |
| column | 主轴为垂直方向，起点在上沿。 |
| column-reverse | 主轴为垂直方向，起点在下沿。 |
5.3.2 flex-wrap属性（如何换行）
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap（默认） | wrap | wrap-reverse;
}
| nowrap | （默认）不换行 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
5.3.3 justify-content属性（主轴上的对齐方式）
.box {
justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}
| flex-start | 默认值）左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等 |
5.3.4 align-items属性（副轴上如何对齐）
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
| flex-start | 交叉轴的起点对齐。 |
| flex-end | 交叉轴的终点对齐。 |
| center | 交叉轴的中点对齐。 |
| baseline | 项目的第一行文字的基线对齐。 |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器。 |
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
