CSS 布局属性Display和Position介绍 {#css-%E5%B8%83%E5%B1%80%E5%B1%9E%E6%80%A7display%E5%92%8Cposition%E4%BB%8B%E7%BB%8D}

1. Display 属性 {#1.-display-%E5%B1%9E%E6%80%A7}

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

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

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

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

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

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

代码示例： {#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B%EF%BC%9A}

.block {
  display: block;
}

.inline {
display: inline;
}


.none {
display: none;
}


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


.flex {
display: flex;
}

`.grid {
display: grid;
}
`

2. Position 属性 {#2.-position-%E5%B1%9E%E6%80%A7}

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

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

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

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

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

代码示例： {#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B%EF%BC%9A-1}

.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 布局属性 {#3.-flexbox-%E5%B8%83%E5%B1%80%E5%B1%9E%E6%80%A7}

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

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

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

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

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

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

代码示例： {#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B%EF%BC%9A-2}

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

4. Grid 布局属性 {#4.-grid-%E5%B8%83%E5%B1%80%E5%B1%9E%E6%80%A7}

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

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

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

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

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

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

代码示例： {#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B%EF%BC%9A-3}

.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;
}
`

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