Logo

菜单

发布于 2026-01-06 11 阅读
0

CSS布局：开发者的全面指南 🔥

CSS布局：开发者的全面指南 🔥

创建美观且响应迅速的网站布局是网站开发的基石。随着设备和屏幕尺寸的不断增多，掌握 CSS 布局技巧对于提供流畅的用户体验至关重要。本文将深入探讨使用 CSS 创建强大而灵活的布局的关键概念和最佳实践。

让我们开始吧🚀

使用 CSS 构建布局有3 种方法，它们分别是：

  1. 浮动布局
  2. Flexbox
  3. CSS Grid

浮动布局

图示展示了 float 属性的工作原理

在 CSS 中使用 float 属性进行布局时，可以将元素水平放置在容器内。它可以包含 left 或 right 值。

语法：

.box1{
  height:30vh;
  width:30vw;
  background-color:red;
  float:right;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 CodePen 示例中，我们创建了两个盒子，并将第一个盒子向右浮动。这样一来，其他元素也可以浮动到它的左侧。这是因为浮动元素脱离了正常的文档流，其后的内容会环绕浮动元素显示。

有关 float 属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/float

如果您想阻止这种换行行为，并确保某些元素不会浮动在浮动元素旁边，您可以使用“clear”属性。

语法：

.box1{
  height:30vh;
  width:30vw;
  background-color:red;
  float:right;
}
.box2{
  clear:right;
  height:30vh;
  width:30vw;
  background-color:red;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 codepen 中，我们对 box 2 应用了“clear”属性，通过这样做，我们得到了一个右侧没有任何元素可以浮动的盒子。

有关清除属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/clear

注意：浮动元素最初用于简单的文本环绕图像，后来逐渐流行起来，成为一种布局工具。然而，它的行为难以控制，在复杂的布局中容易产生意想不到的结果。因此，它在创建现代、响应式和复杂的布局方面存在局限性。

Flexbox

弹性盒示意图

借助 Flexbox，我们可以轻松地在单一方向（水平或垂直）上创建复杂的元素排列。通过将父容器定义为 Flex 容器，您可以精确控制子元素的对齐方式、分布和间距。这种方法无需使用基于浮动的布局和复杂的定位，使其成为构建组件布局的必备工具。

语法：

.flex-container{
  display:flex;
}
Enter fullscreen mode Exit fullscreen mode

父级（弹性容器）的弹性属性包括：

  1. 弯曲方向
  2. 柔性包裹
  3. 正当内容
  4. 对齐项目
  5. 对齐内容

弯曲方向：
它用于定义元素的布局方向。此属性的值可以是 row、row-reverse、column 或 column-reverse。flex-direction 的默认值为“row”。

语法：

.container{
  display:flex;
  flex-direction:column;
}
Enter fullscreen mode Exit fullscreen mode

有关 flex-direction 属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

flex-wrap：

flex-wrap 属性定义了弹性项目是否应该换行。该属性的值可以是 wrap、no-wrap 或 wrap-reverse。

语法：

.container{
  display:flex;
  flex-wrap:wrap;
}
Enter fullscreen mode Exit fullscreen mode

练习：对于上面的代码框，尝试从左向右滑动来改变方向。

有关 flex-direction 属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

justify-content：

它用于定义沿主轴的弹性项目。此属性的值可以是 flex-start、flex-end、center、space-between、space-around 和 space-evenly。

语法：

.container{
  display:flex;
  justify-content:center;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 codepen 示例中，我们使用 flex 和 justify-content 创建了一个简单的 NAVBAR。

justify-content 属性示例

有关 justify-content 属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

对齐项目：

它用于定义沿交叉轴的弹性项目。此属性的值可以是 flex-start、flex-end、center、stretch 等。

语法：

.container{
  display:flex;
  align-items:center;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 codepen 示例中，我们使用 align-items 属性将 flex-items 沿交叉轴居中。

有关 align-items 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

对齐内容：

当交叉轴方向存在额外空间时，此属性用于对齐弹性容器的线条。此属性的值可以是 flex-start、flex-end、center、stretch、space-between、space-around 和 space-evenly。

*语法：*

.container{
  display:flex;
  align-content:center;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 Codepen 示例中，尝试清除 align-content 属性。

有关 align-content 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

弹性元素（子元素）的弹性属性包括：

  1. 命令
  2. 对齐自身
  3. 弹性生长
  4. 弹性收缩

命令 ：

它用于指定弹性项目的顺序。默认情况下，所有弹性项目的顺序为 0。

例如：如果一个弹性容器中有 3 个弹性项目，并且我们只对 1 个项目应用了 order 属性，那么它将浮动到末尾，因为其他两个项目的 order 为 0，因此 order 为 1 的另一个项目将浮动到末尾。

语法：

.item1{
  order: 2;
}
Enter fullscreen mode Exit fullscreen mode

有关 order 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/order

对齐自身：

它用于沿交叉轴对齐各个弹性项目。此属性的值可以是 flex-start、flex-end、center、stretch 和 auto。

语法：

.item1{
  align-self: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

有关 align-self 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

弹性生长：

它用于定义单个弹性项目相对于其他弹性项目的增长能力。默认情况下，所有弹性项目的 flex-grow 属性值均为 0。

语法：

.item1{
  flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode

有关 flex-grow 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

弹性收缩：

它用于定义单个弹性项相对于其他弹性项的缩小能力。默认情况下，所有弹性项的 flex-grow 属性值均为 1。

语法：

.item1{
  flex-shrink: 3;
}
Enter fullscreen mode Exit fullscreen mode

有关 flex 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

有关 flex 属性的更多信息，请访问：
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

CSS Grid

CSS网格示意图

这种方法可以精确控制内容的放置和对齐，因此非常适合设计页面布局和复杂组件。我们可以实现灵活且动态的布局，完美适应各种屏幕尺寸和方向。CSS Grid 直观的语法和强大的功能使其成为现代 Web 开发必不可少的工具，使开发人员能够高效地创建美观且结构清晰的设计。

语法：

.container{
  display:grid;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 codepen 示例中，我们创建了一个 1 列 8 行的 CSS 网格。

父级（网格容器）的网格属性包括：

  1. 网格模板列
  2. 网格模板行
  3. 正当内容
  4. 对齐内容
  5. 网格模板区域

网格模板列：

它用于指定网格布局中的列数和列宽。此属性的值可以是 auto、length、max-content 和 min-content。

语法：

.container{
  display:grid;
  grid-template-columns: auto auto auto; 
}
Enter fullscreen mode Exit fullscreen mode

在上面的 codepen 示例中，我们创建了一个 3 列 3 行的 CSS 网格。

有关 grid-template-columns 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

网格模板行：

它用于指定网格布局中行的高度。此属性的值可以是 auto、length、max-content 和 min-content。

语法：

.container{
  display:grid;
  grid-template-rows: 20px 100px 50px; 
}
Enter fullscreen mode Exit fullscreen mode

有关 grid-template-rows 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

justify-content：

它用于在容器内水平对齐整个网格。此属性的值可以是 center、space-between、space-around、space-evenly 和 start。

注：此属性的图示已在本文讨论 Flexbox 时展示，请参考该图示。

对齐内容：

它用于在容器内垂直对齐整个网格。此属性的值可以是 center、space-between、space-around、space-evenly、start 和 end。

注：此属性的图示已在本文讨论 Flexbox 时展示，请参考该图示。

网格模板区域：

它与 CSS “grid-area” 属性一起使用，用于在网格布局中建立区域。

语法：

.container{
  display:grid;
  grid-template-areas: "box1 box2"
                       "box1 box2"; 
}

.box1{
  grid-area: box1; 
}

.box2{
  grid-area: box2; 
}

.box3{
  grid-area: box3; 
}
Enter fullscreen mode Exit fullscreen mode

有关 grid-template-areas 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

CSS媒体查询：

它用于在满足特定条件时应用 CSS。

语法：

@media screen and (max-width:360px) {
    body{
        background-color: blue;
    }

}
Enter fullscreen mode Exit fullscreen mode

练习：对于上面的代码框，尝试从左向右滑动来改变其方向。如果您看到页面布局发生变化，这是通过“grid-template-areas”属性和媒体查询实现的。当宽度减小到360像素时，我们将“grid-template-areas”的值更改为了另一个值。

有关 CSS 媒体查询的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

网格项（子项）的网格属性包括：

  1. 网格列
  2. 网格行
  3. 网格区域

网格列：
它用于定义网格项在列方向上的起始和结束位置。

语法：

.grid-item1 {
  grid-column: 1 / span 2;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 Codepen 示例中，我们创建了一个 4 列的网格，并将第 1 项从第 1 列扩展到了第 2 列。

有关 grid-column 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

网格行：

它用于定义网格项在行方向上的起始和结束位置。

语法：

.grid-item1 {
  grid-row: 1 / span 2;
}
Enter fullscreen mode Exit fullscreen mode

在上面的 Codepen 示例中，我们创建了一个 4 列的网格，并将第 1 项从第 1 行扩展到了第 2 行。

有关 grid-row 属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

有关网格属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

让我们在[LinkedIn] ( https://www.linkedin.com/in/mohiyaddeen-raza )上联系吧🚀

✨拥抱 CSS 布局设计的艺术，让你的创意在网格、弹性盒和响应式设计中自由驰骋。记住，你放置的每一个像素都是一次创新，塑造着未来的数字体验。在你踏上精通布局的旅程时，不要犹豫，尽管提问、分享见解，并与同行开发者协作。网页设计的世界瞬息万变，通过磨练你的布局技能，你正在用一行行代码塑造着网络的未来。不断突破界限，不断学习，不断打造卓越的用户体验。✨

下次再见，我们会带来更多精彩的攻略。

编程愉快✌🏻

如有任何疑问，请随时在评论区留言，我一定会尽快回复。您的提问我非常欢迎，并会迅速给出详尽的解答。❤️

文章来源：https://dev.to/mohiyaddeen7/mastering-layout-in-css-a-compressive-guide-for-developers-31om
使用 SvelteKit 实现 S...
那些让我成为更优秀程序员的错误