2024年6月24日实训总结

今天我们学习了:

1.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) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。

2. 过渡(CSS3) transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:

如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

 

3. 2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

transform 变换 变形的意思

3.1 移动 translate(x, y)

translate 移动平移的意思

3.2 缩放 scale(x, y) （0~1）

3.3 旋转 rotate(deg)\

4. 动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

4.1 定义动画

@keyframes 动画名称 {
  from{ 开始位置 } 
  to{  结束  }
}
​
@keyframes 动画名称 {
    0%
    55%
     ....
    100%
}
/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/

4.2 调用动画

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

5. 传统布局和flex布局对比

5.1 传统布局

• 兼容性好

• 布局繁琐

• 局限性，不能在移动端很好的布局

5.2 flex布局

• 操作方便，布局极其简单，移动端使用比较广泛

• pc端浏览器支持情况比较差

• IE11或更低版本不支持flex或仅支持部分

5.3. Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。(芸芸众生皆平等)

 

• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

• 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
   

  5.5 容器的属性

  5.5.1 flex-direction属性（主轴的方向）

  flex-direction属性决定主轴的方向（即项目的排列方向）。
  
   

  5.5.2 flex-wrap属性（如何换行）

  默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  
  
  

  4.3 flex-flow（flex-direction属性和flex-wrap属性的简写）

  flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  .box {
    flex-flow: <flex-direction> || <flex-wrap>;
  }

  5.5.3 justify-content属性（主轴上的对齐方式）

  justify-content属性定义了项目在主轴上的对齐方式。

  .box {
    justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
  }

  它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

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

• flex-end：右对齐

• center： 居中

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

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

5.5.4 align-items属性（副轴上如何对齐）

align-items属性定义项目在副轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

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

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

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

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

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器。