css易混淆的知识点

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

    1. 子选择器 (>) 只匹配直接子元素。
    2. 后代选择器 (空格) 匹配所有后代元素(无论嵌套多深)。
  2. 绝对定位vs相对定位

  3. 布局:

  • justify-content 的作用

    • 控制子元素在主轴上的分布方式。
    • 常见值包括 flex-startflex-endcenterspace-betweenspace-around
  • align-itemsalign-self 的区别

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

justify-content

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

align-items

  • 定义子项在交叉轴上的对齐方式。
相关推荐
gnip几秒前
微前端框架选型
前端·javascript
你可以叫我仔哥呀9 分钟前
Java程序员学从0学AI(七)
java·开发语言·人工智能·ai·spring ai
一只小风华~21 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰25 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
程序媛李李李李李蕾41 分钟前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
望获linux1 小时前
【Linux基础知识系列】第六十四篇 - 了解Linux的硬件架构
linux·运维·服务器·开发语言·数据库·操作系统·嵌入式软件
整点可乐1 小时前
cesium实现鹰眼图
javascript·cesium
艾小码1 小时前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
BUG创建者1 小时前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
南方kenny1 小时前
Mock.js:前端开发的假数据神器
前端·javascript