前端学习笔记七

1.transform--转换

1.2D转换

（1） translate根据主轴和交叉轴位置给定的参数，从当前元素位置移动

特点：translate最大的优点：不会影响其他元素的位置

translate中的百分比单位是相对于自身元素的transform: translate(50%,50%);

translate对行内标签没有效果

（2）rotate在平面中根据给定的度数旋转（正值为顺时针，负值为逆时针）

（3）scale在平面中根据主轴和交叉轴方向上的元素的长度来进行放大缩小（正值放大，负值缩小）

（4）skew根据主轴和交叉轴来倾斜（正值顺着主轴和交叉轴的方向倾斜，负值反方向）

2.3D转换

（1）translateZ--沿着Z轴移动

（2）rotateX或Y--根据选择的轴来围绕着轴旋转

2.transition--过渡

过渡就是某一个元素从从开始设置的样式变为另一个样式的过程变化展示

1. 属性（必须）：想要变化的css属性，宽度高度，背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以

2. 花费时间（必须）：单位是秒（必须写单位） 比如0.5s

3. 运动曲线：变化过程中的路径

4. 何时开始：开始变化的时间

3.animation--动画

需要使用规定的语法格式：@keyframes 名字{

                                                               from{}

                                                                to{}

                                                               {

  animation-delay 属性定义动画什么时候开始

循环次数--animation-iteration-count

反向运动animation-direction

animation-play-state暂停或停止

4.弹性盒子--flex Box（重点）

① 容器： 需要添加弹性布局的父元素；

② 项目： 弹性布局容器中的每一个子元素，称为项目

1.容器属性

• flex-direction （row（默认值）：主轴为水平方向，起点在左端。

                          row-reverse：主轴为水平方向，起点在右端。 
  •                  column：主轴为垂直方向，起点在上沿。

    •          column-reverse：主轴为垂直方向，起点在下沿。）

• flex-wrap：（nowrap（默认）：不换行。

  •            wrap：换行，第一行在上方。

    •     wrap-reverse：换行，第一行在下方。）

• justify-content：（flex-start（默认值）：左对齐

  •                       flex-end：右对齐

    •                center： 居中

      •         space-between：两端对齐，项目之间的间隔都相等。

    •                 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    •                 space-evenly: 两个项目之间的距离相等）

• align-items：（flex-start：交叉轴的起点对齐。

  •                 flex-end：交叉轴的终点对齐。

    •         center：交叉轴的中点对齐。

      • baseline: 项目的第一行文字的基线对齐。

      • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。）

2.项目属性

• lex-grow--属性定义项目的放大比例

• flex-shrink--属性定义了项目的缩小比例

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