8个值得了解的纯CSS布局排版技巧

段落一：Flexbox Flexbox作为CSS3的一部分，是一种非常强大的布局方式。它允许将容器中的子元素进行灵活的布局和对齐。以下是一个例子:

使用Flexbox实现水平居中

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

使用flexbox，我们可以通过属性justify-content:center和align-items:center来将容器内的子元素居中。 段落二：Grid布局 与Flexbox一样，Grid也是CSS3的一部分。它是一个二维的网格布局，使用简单、功能强大。以下是示例代码:

使用Grid实现网格布局

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background-color: #CCC;
  height: 100px;
}

这里我们使用了display:grid将容器定义为Grid布局。grid-template-columns定义了三列网格，每列的宽度为1fr。grid-gap定义了网格之间的距离。 段落三：CSS表格布局 CSS表格布局是用CSS实现表格的一种方式，与HTML中的表格不同的是，它不仅可以在行和列之间进行分割，还能够包含嵌套元素。以下是一个示例:

使用CSS表格布局实现三列布局

.container {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  background-color: #CCC;
  padding: 10px;
  text-align: center;
}

我们使用display:table来将容器定义为表格布局。每行使用display:table-row，每个单元格使用display:table-cell。 段落四：Positioning 定位是另一种常见的布局技术，通过将元素相对于其包含容器定位来实现。以下是一个居中对齐的示例:

使用定位实现居中对齐

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这个例子中，我们将包含容器定义为相对定位的，子元素绝对定位，然后使用top、left和transform属性将其居中对齐。 综上所述，Flexbox、Grid布局、CSS表格布局和定位是四种常见的CSS布局技术。无论你想要什么样的布局，你都可以使用其中的一种方法来实现。以上提供的示例都是比较基础的，但是它们都是构建复杂布局的关键。