CSS布局技巧 ｜ 青训营

下面是几种常用的CSS布局技巧及其应用场景和实践：

1. 浮动布局

应用场景：适用于两个或多个元素并排或垂直排列的情况，如导航栏、图片列表、文章列表等。

实践方法：使用float属性将元素向左或向右浮动，同时要记得清除浮动以避免布局混乱。例如：

.container {
  overflow: hidden; /* 清除浮动 */
}

.box {
  float: left;
  width: 50%;
}

2. 定位布局

应用场景：适用于需要精确定位和层级关系的元素，如弹出框、轮播图、模态框等。

实践方法：使用position属性进行定位，结合top、right、bottom、left属性进行精准定位。例如：

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

3. 弹性盒子布局

应用场景：适用于动态调整元素大小和位置的情况，如响应式布局、导航栏、表单等。

实践方法：使用display: flex将元素容器变为弹性盒子，通过justify-content和align-items属性控制元素在容器中的位置和对齐方式。例如：

.container {
  display: flex;
  justify-content: space-between; /* 横向分布 */
  align-items: center; /* 垂直居中 */
}

.box {
  flex: 1; /* 自动占用剩余空间 */
}

4. 网格布局

应用场景：适用于复杂的网格结构布局，如产品展示、数据报表、电商网站等。

实践方法：使用display: grid将元素容器变为网格布局，通过grid-template-columns和grid-template-rows属性定义网格的列数和行数，通过grid-column和grid-row属性控制元素在网格中的位置。例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等分 */
  grid-template-rows: repeat(2, 1fr); /* 两行等分 */
}

.box {
  grid-column: 1 / 3; /* 跨两列 */
  grid-row: 1 / 2; /* 第一行 */
}

#青训营笔记创作活动