CSS常见的定位和布局及瀑布流布局

发表于 | 分类于
CSS常见的定位和布局及瀑布流布局

定位

在 CSS 中，有几种常见的定位方式，每种方式都有其特定的用途和效果。

常用定位方式

定位方式说明：

静态定位（static）：

  • 默认值：所有元素默认的定位方式。
  • 特点：元素按照文档流顺序进行布局，无法通过 top、right、bottom、left 属性进行调整。
  • 用途：适用于大多数常规布局需求。

相对定位（relative）：

  • 定义：元素相对于其正常位置进行定位。
  • 特点：使用 top、right、bottom 和 left 属性调整位置，但元素仍保留在原来的文档流位置，其他元素的位置不会受到影响。
  • 用途：常用于微调元素位置，同时保持元素在正常文档流中的位置。

绝对定位（absolute）：

  • 定义：元素相对于最近的非static定位的祖先元素进行定位（如果没有定位祖先，则相对于 <html> 元素）。
  • 特点：元素从文档流中移除，使用 top、right、bottom 和 left 属性进行精确定位。不会影响其他元素的位置。
  • 用途：适用于需要精确放置的元素，比如弹出菜单、工具提示等。

固定定位（fixed）：

  • 定义：元素相对于浏览器窗口进行定位。
  • 特点：元素从文档流中移除，使用 top、right、bottom 和 left 属性进行定位，滚动页面时，固定定位的元素位置不会发生变化。
  • 用途：适用于页面上始终可见的元素，如固定导航栏、悬浮按钮等。

粘性定位（sticky）：

  • 定义：元素在跨越特定阈值时从相对定位转变为固定定位(fixed)。
  • 特点：元素在滚动到指定位置时固定在视口的一部分，直到父容器的边界被超过为止。使用 top、right、bottom 和 left 属性定义切换位置的阈值。
  • 用途：适用于在滚动页面时保持在视口内的元素，如粘性头部或侧边栏。

使用

  • position: static;

  • position: relative;

  • position: absolute;

  • position: fixed;

  • position: sticky;

注意：

通常所说的无定位是指 static 定。

粘性定位

要想实现元素滚动后会定在固定的位置,如果用JS就是判断根据用户滚动的高度 把元素的位置移动一下，还是相对麻烦的。

但是使用粘性定位就很简单了

在每一个元素上面 加两行样式代码就搞定了

1
2
position: sticky;
top: 0;

粘性定位可以被认为是相对定位和固定定位的混合。

元素在跨越特定阈值前为相对定位，之后为固定定位(fixed)。

布局

布局则是关于如何安排和组织网页中的元素，确保它们按照预期的方式显示。常见的布局方式包括：

  1. 块级布局（Block Layout）：

    元素（如 <div>）按照块级布局，通常从上到下排列，占据整个容器的宽度。

  2. 行内布局（Inline Layout）：

    元素（如 <span>）按行内方式排列，只占据其内容的宽度，不会强制换行。

  3. 弹性布局（Flexbox）：

    提供了一种灵活的布局方式，通过 display: flex 创建一个弹性容器，子元素可以在容器内灵活对齐和分配空间。

  4. 网格布局（Grid）：

    创建一个基于行和列的网格布局，通过 display: grid 定义行和列，并将子元素放置在网格单元格中，实现复杂的布局设计。

  5. 流式布局（Fluid Layout）：

    使用百分比宽度等相对单位，使页面在不同屏幕尺寸下保持良好的响应能力。

Float布局

使用 float: left; 或 float: right; 将元素浮动到指定方向，常用于实现早期的多列布局，现在已逐渐被 Flexbox 和 Grid 替代。

Flex布局

https://www.psvmc.cn/article/2019-08-01-web-flex.html

Grid布局

https://www.psvmc.cn/article/2023-08-16-css3-grid.html

多列布局/瀑布流布局

要实现瀑布流布局，通常可以使用 CSS 的多列布局（CSS Multi-column Layout）。

1
2
3
4
5
6
7
8
9
10
11
12
/* 父元素设置多列布局 */
.container {
    column-count: 3; /* 设置列数 */
    column-gap: 20px; /* 设置列与列之间的间隔 */
}

/* 子元素设置宽度和样式 */
.item {
    display: inline-block;
    width: 100%; /* 宽度根据列数和间隔来调整 */
    margin-bottom: 20px; /* 底部间隔，可根据需要调整 */
}

排列顺序示例

image-20240718181814767