我的CSS的知识盲区（自己自用！！！！）

技能大赛的时候题目中我不会的地方，知识点，下面------

display  经常会使用到

这是重要的布局属性之一，决定元素在页面上的显示方式及参与何种格式化上下文

NUM1   block   块级元素

• 独占一行，宽度默认撑满父容器

• 可以设置宽度、高度、内外边距

• 常见块级元素：<div>, <p>, <h1>-<h6>, <section>

NUM2  inline 行内元素

• 不独占一行，与其他行内元素排在同一行

• 宽度由内容决定，不能设置宽度和高度

• 常见行内元素：<span>, <a>, <strong>, <em>

NUM3  inline-block  行内块元素

• 结合了块级和行内元素的特性

• 不独占一行，但可以设置宽度、高度和内外边距

• 常用于导航菜单、按钮等需要水平排列又能设置尺寸的元素

NUM4  none 不显示

• 元素不显示，不占据文档流空间

• 与visibility: hidden的区别：后者隐藏元素但仍占据空间

NUM5  flex   弹性布局

• 创建弹性容器，子元素成为弹性项目

• 主轴(main axis)和交叉轴(cross axis)布局

• 常用属性：

  • flex-direction: 主轴方向(row/column)

  • justify-content: 主轴对齐方式

  • align-items: 交叉轴对齐方式

  • flex-wrap: 是否换行

NUM6  grid  网格布局

• 二维网格布局系统

• 定义行和列来创建复杂的布局结构

• 常用属性：

  • grid-template-columns: 定义列

  • grid-template-rows: 定义行

  • grid-gap: 网格间距

  • grid-area: 项目定位