周报1

1，复习和巩固了html和css的基础内容；
2，学习了简单的css3的2D，3D转换；

1. translate() ：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
2. rotate() 方法：在一个给定度数顺时针旋转的元素，负值允许。
3. scale() 方法：元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
4. skew( ， ) 方法：包含两个参数值。分别表示X轴和Y轴倾斜的角度。skewX()表示只在X轴(水平方向)倾斜。skewY()表示只在Y轴(垂直方向)倾斜。

3，学习了css中的flex布局(Flexiable box);

1. 制定Flex布局 ： .box{display:flex}
   Flex的所有属性:
   flex-direction
   flex-wrap
   flex-flow
   justify-content
   align-items
   align-content

2. flex-direction属性（决定主轴的方向）:
   row（默认值）：主轴为水平方向，起点在左端。
   row-reverse：主轴为水平方向，起点在右端。
   column：主轴为垂直方向，起点在上沿。
   column-reverse：主轴为垂直方向，起点在下沿。

3. flex-wrap属性:
   （1）nowrap（默认）：不换行。
   （2）wrap：换行，第一行在上方。
   （3）wrap-reverse：换行，第一行在下方。

4. justify-content属性（定义项目在主轴上的对齐方式）:
   flex-start（默认值）：左对齐
   flex-end：右对齐
   center： 居中
   space-between：两端对齐，项目之间的间隔都相等,无边框。
   space-around：每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。

5. align-items属性（定义项目在交叉轴上如何对齐）：
   flex-start：交叉轴的起点对齐。
   flex-end：交叉轴的终点对齐。
   center：交叉轴的中点对齐。
   baseline: 项目的第一行文字的基线对齐。
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content属性（定义多根轴线的对齐方式，如果只有一根轴线，则该属性不起作用）
   flex-start：与交叉轴的起点对齐。
   flex-end：与交叉轴的终点对齐。
   center：与交叉轴的中点对齐。
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch（默认值）：轴线占满整个交叉轴。