青训营X豆包MarsCodeCSS布局 ｜ 豆包MarsCode AI 刷题

其实之前在mdn上看了一会css，但是可能那会时间紧张赶着临摹网页的作业，看得有点混乱，对css布局还不清楚，是给ai描述然后最终临摹成功的，感觉看了一遍视频就像梳理了一遍一样，下面是选择方向三实践选题css布局的伴学笔记，欢迎食用，不是很深入，有进行一些检索，有错误欢迎指正！

1. 常规流（行级和块级）

应用场景：

• 块级元素：当你想要创建一个独立的区域，比如一个独立的段落、标题或者一个完整的区块时，块级元素是首选。它们自动换行，不会与其他元素并排显示。
• 行级元素：适用于需要在同一行显示多个元素的场景，如文本中的图标、按钮或者链接。

实操实践：

<!-- 块级元素 -->
<div>
  <h1>文章标题</h1>
  <p>这里是文章的段落内容。</p>
</div>

<!-- 行级元素 -->
<p>这是一段文本，包含<a href="#">内联链接</a>和<span>强调的文本</span>。</p>

2. 浮动（Float）

应用场景：

• 图文混排：在文章或博客中，你可能希望图片浮动在文本的一侧，而文本环绕在图片周围。
• 布局设计：创建两栏或三栏布局，其中一栏固定宽度，另一栏自适应剩余空间。

实操实践：

.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

<div class="float-left">
  <img src="image.jpg" alt="示例图片">
</div>
<p>这里是文本内容，会环绕在图片周围...</p>

<div class="float-right">
  <img src="image.jpg" alt="示例图片">
</div>
<p>这里是文本内容，也会环绕在图片周围...</p>

3. 绝对定位

应用场景：

• 弹出层和对话框：需要在页面上精确控制位置的元素，如模态框、弹出菜单等。
• 固定元素：比如页面顶部的导航栏或者页面底部的版权信息。

实操实践：

.container {
  position: relative;
}

.popup {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 10; /* 确保弹出层在最上面 */
}

<div class="container">
  <div class="popup">这是一个弹出框</div>
</div>

4. 表格布局

应用场景：

• 数据展示：当需要展示结构化数据时，如表格、电子表格或者统计数据。
• 布局设计：虽然现在更多使用CSS Grid，但在一些老旧的布局中，表格布局仍然被用来创建复杂的布局结构。

实操实践：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

5. 弹性盒子布局

应用场景：

• 响应式导航栏：创建一个能够自适应不同屏幕尺寸的导航栏。
• 卡片布局：在不同设备上展示一系列卡片，需要它们在不同屏幕尺寸下依然保持整齐。

实操实践：

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 允许项目换行 */
}

.flex-item {
  flex: 1 1 200px; /* 项目基础大小为200px，允许伸缩 */
  margin: 10px; /* 项目之间的间距 */
}

<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
  <!-- 更多项目 -->
</div>

6. 网格布局（Grid）

应用场景：

• 复杂页面布局：设计复杂的网页布局，比如杂志式的首页，需要多种不同大小的卡片或组件并排显示。
• 仪表板设计：创建包含多种不同大小和形状的组件的仪表板。

实操实践：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 10px; /* 格子间距 */
}

.grid-item {
  background-color: #f1f1f1;
  padding: 20px;
}

<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <!-- 更多项目 -->
</div>

最后

通过走进css到深入css（上）（下）让我对CSS布局技巧有了更清晰的认识。每种布局方式都有用武之地，选择合适的工具，就能打造出既美观又实用的网页布局。