02 CSS常用布局技巧 | 豆包MarsCode AI刷题

南国刘同学
62 阅读4分钟

浮动布局 (Float)

概念

浮动布局是一种早期的布局方式，通过 float 属性让元素在页面中左右浮动。

常用属性

  • float：控制元素浮动方向（left 或 right）。
  • clear：清除浮动（left, right, both）。

应用场景

  • 创建简单的多栏布局。
  • 实现图文混排效果（如图片左浮动，文字环绕）。

实践示例


<div class="container">
  <div class="left">Left Sidebar</div>
  <div class="main">Main Content</div>
  <div class="right">Right Sidebar</div>
</div>

效果

image.png

.container {
  overflow: hidden; /* 清除浮动 */
}
.left, .main, .right {
  float: left;
  width: 30%; /* 示例宽度 */
}
.main {
  width: 40%; /* 中间内容区域更大 */
}

加入CSS效果

  • image.png

以下是关于 CSS布局技巧 的全面指导，涵盖了浮动、定位、弹性盒子布局（Flexbox）等常用技术，并结合实际应用场景和操作实例。

1. 浮动布局 (Float)

概念

浮动布局是一种早期的布局方式，通过 float 属性让元素在页面中左右浮动。

常用属性

  • float：控制元素浮动方向（left 或 right）。
  • clear：清除浮动（left, right, both）。

应用场景

  • 创建简单的多栏布局。
  • 实现图文混排效果（如图片左浮动，文字环绕）。

实践示例

<div class="container">
  <div class="left">Left Sidebar</div>
  <div class="main">Main Content</div>
  <div class="right">Right Sidebar</div>
</div>

纯HTML 页面效果

  • image.png
.container {
  overflow: hidden; /* 清除浮动 */
}
.left, .main, .right {
  float: left;
  width: 30%; /* 示例宽度 */
}
.main {
  width: 40%; /* 中间内容区域更大 */
}

使用浮动布局 页面效果

  • image.png

2. 定位布局 (Position)

概念

定位布局通过 position 属性定义元素在页面中的位置。

常用属性值

  • static：默认值，正常文档流。
  • relative：相对定位，相对于自身的正常位置偏移。
  • absolute：绝对定位，相对于最近的定位父元素。
  • fixed：固定定位，相对于视口固定位置。
  • sticky：粘性定位，在滚动到某个阈值时固定位置。

应用场景

  • 创建固定导航栏（fixed）。
  • 实现弹窗居中效果（absolute）。
  • 粘性效果（sticky）用于表头或固定元素。

实践示例

<div class="container">
  <div class="header">Header</div>
  <div class="content">Main Content</div>
  <div class="footer">Footer</div>
</div>

纯HTML 页面效果

  • image.png

.header {
  position: sticky;
  top: 0; /* 滑动到页面顶部时固定 */
  background-color: #f4f4f4;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
}

使用定位布局 页面效果

  • image.png

3. 弹性盒子布局 (Flexbox)

概念

Flexbox 是 CSS3 提供的强大布局方式，适用于一维布局（水平或垂直）。

常用属性

  • 容器属性：

    • display: flex：启用弹性盒子模型。
    • flex-direction：排列方向（row, column 等）。
    • justify-content：主轴对齐方式。
    • align-items：交叉轴对齐方式。
    • flex-wrap：子项是否换行（wrap 或 nowrap）。

  • 子项属性：

    • flex：子项的弹性伸缩比。
    • align-self：单个子项的交叉轴对齐方式。

应用场景

  • 水平居中或垂直居中对齐。
  • 创建响应式导航栏或网格布局。

实践示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

纯HTML 页面效果

  • image.png
.container {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 主轴居中 */
  align-items: center;    /* 交叉轴居中 */
  height: 100vh;
}
.item {
  flex: 1; /* 子项均分 */
  text-align: center;
  background: lightblue;
  margin: 10px;
}

使用Flex布局 页面效果

  • image.png

4. 网格布局 (CSS Grid)

概念

CSS Grid 是 CSS3 提供的二维布局系统，适用于复杂的网格结构。

常用属性

  • 容器属性：
    • display: grid：启用网格模型。
    • grid-template-columns 和 grid-template-rows：定义列和行大小。
    • gap：定义网格项间距。
  • 子项属性：
    • grid-column 和 grid-row：定义网格项占用的行和列。

应用场景

  • 创建复杂的网格布局，如图片墙或仪表盘。
  • 自适应多列布局。

实践示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

纯HTML效果

  • image.png
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 10px;
}
.item {
  background: lightcoral;
  text-align: center;
  padding: 20px;
}

使用Gird 页面效果

  • image.png

5. 多列布局 (Multi-column)

概念

多列布局用于将内容分割为多列，类似报纸或杂志的排版。

常用属性

  • column-count：定义列数。
  • column-gap：定义列间距。

应用场景

  • 创建报纸式排版内容。

实践示例

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum...
</div>

纯HTML效果

  • image.png
.text {
  column-count: 3; /* 三列布局 */
  column-gap: 20px; /* 列间距 */
}

使用多列布局页面效果

image.png

6. 浮动与Flexbox/网格对比总结

技术适用场景优势劣势
浮动布局简单的多栏布局易用，兼容性好对齐复杂，需清除浮动
定位布局弹窗、固定导航等特定功能布局灵活精确定位维护复杂，文档流容易被破坏
Flexbox一维布局，如水平/垂直居中简单、强大，适配不同屏幕复杂二维布局时不够高效
Grid布局二维布局，如仪表盘、图片墙等强大，适合复杂网格兼容性稍差，学习成本较高

总结

布局建议

  • 简单布局用 Flexbox。
  • 复杂网格用 Grid。
  • 特殊情况用 定位 或 浮动。

学习建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS新特性还在不断出现

参考

在线工具

avatar
文章
阅读
粉丝