css布局技巧：浮动，定位与弹性盒子布局 ｜ 豆包MarsCode AI 刷题

wHiteBear
78 阅读4分钟

css汇总布局技巧：浮动 定位

浮动（Float）和定位（Positioning）是 CSS 中非常重要的布局技术，它们各有特点和适用场景。接下来我会尽量用简单易懂的方式解释这两个概念，并给出一些常见的应用场景和实践示例，一起开始学习吧！

浮动（Float）

概念

浮动（Float）是一种让元素脱离正常文档流并移动到其父元素的左侧或右侧的技术。浮动元素会尽可能地向左或向右移动，直到碰到包含块的边缘或其他浮动元素。

我们通过一段代码来简单地理解一下：

屏幕截图 2024-11-25 204944.png

这就是我们都见过的段落块向左浮动，那如果是不设置浮动相关属性呢？（可以删去样式规则中那一行float属性，也可以置为float：none；，也就是按照正常文档流在页面上展现，这样子段落之间严格按照了<p>这种块级标签顺序摆放，浪费了好多空间，所以浮动是设计页面布局必不可少的一部分！

image.png
常见属性值
  • float: left;：元素向左浮动。
  • float: right;：元素向右浮动。
  • float: none;：元素不浮动（默认值）。
常见应用场景
  1. 文本环绕图片：让文本围绕图片显示。（也就是上述我给出的例子，float：left）
  2. 多列布局：创建多列布局，如两栏或三栏布局。

多栏布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多栏布局实例</title>
    <style>
        /* 定义容器样式 */
        .container {
            width: 600px;
            border: 1px solid black;
            overflow: hidden; /* 清除浮动 */
        }
        /* 定义栏样式 */
        .column {
            float: left;
            width: 300px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    
    <div class="container">
        
        <div class="column">
            <h2>Column 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        
        <div class="column">
            <h2>Column 2</h2>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</body>
</html>

image.png

定位（Positioning）

概念

定位（Positioning）是一种控制元素在页面上的位置的技术。通过设置 position 属性，可以改变元素的定位方式。

常见属性值
  • position: static;：默认值，元素按照正常文档流定位。
  • position: relative;：相对定位，元素相对于其正常位置进行定位。
  • position: absolute;：绝对定位，元素相对于最近的非 static 定位的祖先元素进行定位。
  • position: fixed;：固定定位，元素相对于浏览器窗口进行定位。
  • position: sticky;：粘性定位，元素在滚动到特定位置时变为固定定位。
常见应用场景
  1. 固定头部或底部：创建固定在页面顶部或底部的导航栏，这部分经常由position：fixed来实现。
  2. 弹出层或模态框：创建覆盖在页面上的弹出层或模态框。
  3. 相对定位：微调元素的位置。position: relative，可以结合 top, right, bottom, left 属性来调整元素的位置。
实践示例

固定头部

image.png

弹出层或模态框通常用于显示重要的信息或提示用户进行某些操作。也可以使用 position: fixed 来实现覆盖在页面上的效果。

相对定位：在这部分代码中，通过left，top这两个属性的值来控制box相对于container的位置

image.png

总结

  • 浮动（Float）：用于创建多列布局和文本环绕图片等场景。
  • 定位（Positioning）：用于创建固定头部、弹出层、模态框等需要精确控制位置的布局。

css 布局模型

CSS Flexbox

Flexbox（弹性盒子布局）是一种一维布局模型，主要用于在容器内沿一条轴线排列子元素。它的主要优点是：

  1. 灵活的对齐和分布：可以轻松地对齐和分布子元素，无论是水平、垂直还是两者结合。
  2. 自动调整大小：子元素可以根据容器的大小自动调整大小，非常适合响应式设计。
  3. 简单的语法：使用 display: flex 将容器设置为弹性盒子，然后通过 justify-content、align-items 和 flex-direction 等属性控制子元素的排列。
示例
.container {
  display: flex;
  justify-content: space-between; /* 子元素之间均匀分布 */
  align-items: center; /* 垂直居中对齐 */
  flex-wrap: wrap; /* 允许子元素换行 */
}
.item {
  flex: 1; /* 子元素可以自动调整大小 */
  min-width: 200px; /* 最小宽度 */
  margin: 10px;
}

CSS Grid

Grid（网格布局）是一种二维布局模型，可以同时控制行和列的排列。它的主要优点是：

  1. 复杂的布局：可以轻松创建复杂的多列或多行布局。
  2. 精确的控制：可以精确地控制每个单元格的位置和大小。
  3. 响应式设计的强大工具：通过媒体查询和 fr 单位，可以轻松实现响应式布局。
示例
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应列数，每列最小宽度200px */
  gap: 10px; /* 单元格之间的间距 */
}
.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}
  • Flexbox 和 Grid 是 CSS 中的两种布局模型，它们在响应式设计中发挥着重要作用。
    • Flexbox 适用于一维布局，提供灵活的对齐和分布。
    • Grid 适用于二维布局，提供精确的控制和复杂的布局。
avatar
文章
阅读
粉丝