css易混淆的知识点

1. 子选择器 (>) vs 后代选择器 (空格)

   1. 子选择器 (>) 只匹配直接子元素。
   2. 后代选择器 (空格) 匹配所有后代元素（无论嵌套多深）。

2. 绝对定位vs相对定位

3. 布局：

• justify-content 的作用

  • 控制子元素在主轴上的分布方式。
  • 常见值包括 flex-start、flex-end、center、space-between 和 space-around。

• align-items 和 align-self 的区别

  • align-items 作用于所有子元素，设置它们在交叉轴上的对齐方式。
  • align-self 作用于单个子元素，可以覆盖 align-items 的设置。
  • 定义子项在交叉轴上的对齐方式。
  • 可选值：
    • stretch（默认）：子项拉伸以填满容器的高度。
    • flex-start：向交叉轴起点对齐。
    • flex-end：向交叉轴终点对齐。
    • center：居中对齐。
    • baseline：基线对齐。

• 主轴：justify-content。
• 交叉轴：align-content。

justify-content：

• 定义子项在主轴上的对齐方式。

align-items：

• 定义子项在交叉轴上的对齐方式。