css布局技巧 | 青训营笔记

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

1. 浮动 (Float)

float 属性让元素向左或向右浮动，并让其他内容环绕它。常用于文本环绕图片或实现简单的列布局。

• 实际例子：

  .image {
    float: left;
    margin-right: 15px;
  }
  .content {
    overflow: hidden; /* 清除浮动 */
  }
  

2. 定位 (Position)

position 属性用于控制元素的位置。常用的值有 static、relative、absolute 和 fixed。

• 应用场景：
  • relative：相对定位，用于调整元素相对于自身原始位置的偏移。
  • absolute：绝对定位，用于相对于最近的已定位祖先元素定位。由于是相对于已定位的祖先，如果没有，则会自动向上搜索，直至搜索到html标签，即根元素，在实际使用中需要尤其注意。
  • fixed：固定定位，用于固定在视口位置（常用于导航条）。
• 实际例子：

  .container {
    position: relative;
  }
  .box {
    position: absolute;
    top: 20px;
    left: 30px;
  }
  

3. 弹性盒子布局 (Flexbox)

Flexbox 是一种一维布局模型，适用于在一个方向上（横向或纵向）排列元素，能够自动调整子元素的大小和排列方式。

• 实际例子：

  .container {
    display: flex;
    justify-content: space-between; /* 主轴上的元素间距 */
    align-items: center; /* 交叉轴上的居中对齐 */
  }
  .item {
    flex: 1; /* 每个子元素均分剩余空间 */
  }
  

  Flexbox 布局对于响应式设计和简单的列/行布局非常有用。

4. 网格布局 (Grid)

Grid 是一种二维布局模型，可以让开发者在行和列上控制元素布局。比 Flexbox 更强大，适用于复杂的网格布局。

• 实际例子：

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    grid-template-rows: auto; /* 行高自动调整 */
    gap: 10px; /* 网格间隔 */
  }
  .item {
    grid-column: span 2; /* 元素跨越2列 */
  }
  

  Grid 适合用来处理复杂的布局，尤其是在实现响应式设计时，能灵活地根据屏幕尺寸调整列数。

5. CSS 多列布局 (Multi-column Layout)

通过 column-count 和 column-gap 等属性实现多列布局，常用于文本内容分栏。

• 实际例子：

  .content {
    column-count: 3;
    column-gap: 20px;
  }
  

  多列布局适用于需要将文本或内容分栏显示的场景。

小结

这些 CSS 布局技巧各有优缺点： 浮动 适合简单布局，但需要清除浮动。 定位 适合对元素进行精确定位，但可能破坏文档流。 Flexbox 适合一维布局，如单行或单列排列。 Grid 适合复杂的二维布局，能处理多行和多列。CSS 多列布局 (Multi-column Layout) 虽然简单，但是在实际处理多列文本方面中仍然较为实用。