CSS常见布局整理

CSS 常见的布局有以下几种：

1. 浮动布局（Float）
2. Flexbox 布局
3. Grid 布局
4. 相对定位布局
5. 绝对定位布局
6. 弹性盒子文本布局

以下是每种布局的简单示例代码：

1. 浮动布局（Float）

.float-layout {
  float: left; /* 或者使用 right */
  width: 50%; /* 需要设置宽度 */
}

2. Flexbox 布局

.flex-layout {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

3. Grid 布局

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  grid-gap: 10px; /* 格子间隔 */
}

4. 相对定位布局

.relative-layout {
  position: relative;
  top: 10px; /* 相对于原位置向下移动 */
  left: 20px; /* 相对于原位置向右移动 */
}

5. 绝对定位布局

.absolute-layout {
  position: absolute;
  top: 0;
  right: 0;
}

6. 弹性盒子文本布局

.text-layout {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

这些布局可以根据具体需求进行组合和调整以实现复杂的页面布局。