CSS 布局属性Display和Position介绍

1. Display 属性

  • Block: 将元素渲染为块级元素，如 <div>、<p>。

  • Inline: 将元素渲染为内联元素，如 <span>、<a>。

  • None: 元素不会被渲染，也不会占据任何空间。

  • Inline-block: 将元素渲染为内联块元素，既具有内联元素的特性，又可以设置宽高。

  • Flex: 将元素渲染为弹性布局容器。

  • Grid: 将元素渲染为网格布局容器。

代码示例：

.block {
  display: block;
}

.inline {
  display: inline;
}

.none {
  display: none;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

2. Position 属性

  • Static: 默认值，元素按照正常文档流进行定位。

  • Relative: 元素按照正常文档流进行定位，然后相对于其正常位置进行偏移。

  • Absolute: 元素脱离正常文档流，相对于最近的非 static 定位的祖先元素进行定位。

  • Fixed: 元素脱离正常文档流，相对于浏览器窗口进行定位。

  • Sticky: 元素根据正常文档流进行定位，然后相对于滚动窗口和包含块进行偏移，表现为相对定位和固定定位的混合。

代码示例：

.static {
  position: static;
}

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute {
  position: absolute;
  top: 50px;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

.sticky {
  position: sticky;
  top: 0;
}

3. Flexbox 布局属性

  • flex-direction: 定义主轴的方向。

  • flex-wrap: 控制是否允许子元素换行。

  • flex-flow: 是 flex-direction 和 flex-wrap 的简写属性。

  • justify-content: 定义子元素在主轴上的对齐方式。

  • align-items: 定义子元素在交叉轴上的对齐方式。

  • align-content: 定义多根轴线的对齐方式。

代码示例：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1 1 auto;
}

4. Grid 布局属性

  • grid-template-columns: 定义网格的列数及每列的宽度。

  • grid-template-rows: 定义网格的行数及每行的高度。

  • grid-gap: 定义网格线之间的间隙。

  • justify-items: 定义网格项在网格单元格内的对齐方式。

  • align-items: 定义网格项在网格单元格内的垂直对齐方式。

  • grid-template-areas: 通过网格区域的名称来定义网格布局。

代码示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 10px;
  justify-items: center;
  align-items: center;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

请注意，以上代码示例只是演示了各个属性的基本用法，实际使用时可能需要根据具体需求进行调整。