CSS布局技巧 | 青训营

浮动布局（Float Layout）：

概述：

浮动布局通过将元素从正常的文档流中脱离，使其向左或向右浮动，从而实现多个元素的排列。

应用场景：

• 创建多列布局，如报纸排版。
• 图片环绕文字。
• 实现响应式布局，移动端适配。

实操实践：

.container {
  width: 100%;
}

.item {
  float: left;
  width: 33.33%; /* 三列布局示例 */
  box-sizing: border-box;
  padding: 10px;
}

定位布局（Positioning Layout）：

概述：

定位布局通过设置元素的定位属性（如 position: absolute和 position: relative）来精确控制元素的位置。

应用场景：

• 创建重叠效果，如导航栏上的下拉菜单。
• 实现绝对定位元素相对于父元素的定位。
• 创造层叠效果，如模态框。

实操实践：

.parent {
  position: relative;
}

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

弹性盒子布局（Flexbox Layout）：

概述：

弹性盒子布局是一种用于分布空间和对齐内容的一维布局模型。

应用场景：

• 创建灵活的水平或垂直布局。
• 响应式设计中的元素对齐和排列。
• 复杂布局，如导航栏和侧边栏的组合。

实操实践：

.container {
  display: flex;
  justify-content: space-between; /* 在容器内平均分布子元素 */
  align-items: center; /* 垂直居中对齐 */
}

.item {
  flex: 1; /* 灵活伸缩 */
}

这些是CSS布局的常见技巧，它们可以单独使用或结合在一起，根据具体的布局需求选择最合适的方法。