简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：是的！我们正在计划一个大动作！
11-02 12:46
通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～
10-23 09:32
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！
10-23 09:31
通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq
10-23 09:28
通知：签到时间调整为每日4:00（东八区）
10-23 09:26
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

探索CSS常见布局方式从传统浮动到现代Flexbox与Grid的全面解析助你掌握网页布局核心技巧

威震华夏关云长

3万

主题

423

科技点

3万

积分

大区版主

木柜子打湿

积分
31916

三倍冰淇淋无人之境【一阶】财Doro小樱（小丑装）立华奏以外的星空【二阶】⑨的冰沙
发表于 2025-9-22 15:30:00 | 显示全部楼层 |阅读模式 [标记阅至此楼]

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

CSS布局是网页设计的核心组成部分，它决定了网页元素如何在页面上排列和显示。随着Web技术的不断发展，CSS布局方式也经历了从简单到复杂、从传统到现代的演变过程。本文将全面解析CSS布局的发展历程，详细介绍从传统浮动布局到现代Flexbox与Grid布局的各种技术，帮助读者掌握网页布局的核心技巧，提升前端开发能力。

传统布局方式

正常文档流

正常文档流是HTML元素的默认布局方式。在没有应用CSS进行特殊布局的情况下，元素会按照HTML代码的顺序从上到下排列，块级元素会独占一行，行内元素则会在一行内从左到右排列，直到行满后自动换行。
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .block {
  7.             background-color: #f0f0f0;
  8.             margin: 10px;
  9.             padding: 15px;
  10.         }
  11.         .inline {
  12.             background-color: #e0e0e0;
  13.             margin: 5px;
  14.             padding: 10px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="block">块级元素1</div>
  20.     <div class="block">块级元素2</div>
  21.    
  22.     <span class="inline">行内元素1</span>
  23.     <span class="inline">行内元素2</span>
  24.     <span class="inline">行内元素3</span>
  25. </body>
  26. </html>
复制代码

正常文档流的优点是简单直观，不需要额外的CSS代码。但在复杂布局需求面前，它的局限性也很明显，无法实现多列布局、垂直居中等常见布局需求。

浮动布局(Float)

浮动布局是早期Web开发中常用的布局方式，通过设置元素的float属性为left或right，使元素脱离正常文档流，向左或向右浮动，直到其外边缘碰到包含框或另一个浮动元素的边缘。
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .container {
  7.             width: 100%;
  8.             overflow: hidden; /* 清除浮动 */
  9.         }
  10.         .sidebar {
  11.             float: left;
  12.             width: 25%;
  13.             background-color: #f0f0f0;
  14.             padding: 20px;
  15.         }
  16.         .content {
  17.             float: right;
  18.             width: 75%;
  19.             background-color: #e0e0e0;
  20.             padding: 20px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="sidebar">
  27.             <h3>侧边栏</h3>
  28.             <p>这是侧边栏内容</p>
  29.         </div>
  30.         <div class="content">
  31.             <h2>主要内容</h2>
  32.             <p>这是主要内容区域</p>
  33.         </div>
  34.     </div>
  35. </body>
  36. </html>
复制代码

浮动布局的优点是兼容性好，可以创建多列布局。但它也有一些缺点：

1. 需要清除浮动，否则会影响后续元素的布局
2. 浮动元素脱离文档流，可能导致父元素高度塌陷
3. 垂直居中困难
4. 布局不够灵活，难以实现复杂的响应式设计

清除浮动的方法有多种，常见的有：

1. 使用clear属性
2. 使用overflow: hidden或overflow: auto
3. 使用clearfix技巧
  2. /* clearfix技巧 */
  3. .clearfix::after {
  4.     content: "";
  5.     display: table;
  6.     clear: both;
  7. }
复制代码

定位布局(Position)

定位布局通过设置元素的position属性来控制元素的位置。常见的定位值有：

• static: 默认值，元素处于正常文档流中
• relative: 相对定位，相对于元素在正常文档流中的位置进行偏移
• absolute: 绝对定位，相对于最近的已定位祖先元素进行定位
• fixed: 固定定位，相对于浏览器窗口进行定位
• sticky: 粘性定位，基于用户的滚动位置进行定位
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .container {
  7.             position: relative;
  8.             width: 100%;
  9.             height: 300px;
  10.             background-color: #f0f0f0;
  11.         }
  12.         .relative {
  13.             position: relative;
  14.             top: 20px;
  15.             left: 20px;
  16.             width: 200px;
  17.             height: 100px;
  18.             background-color: #e0e0e0;
  19.         }
  20.         .absolute {
  21.             position: absolute;
  22.             top: 50px;
  23.             right: 50px;
  24.             width: 200px;
  25.             height: 100px;
  26.             background-color: #d0d0d0;
  27.         }
  28.         .fixed {
  29.             position: fixed;
  30.             bottom: 20px;
  31.             right: 20px;
  32.             width: 100px;
  33.             height: 50px;
  34.             background-color: #c0c0c0;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="relative">相对定位元素</div>
  41.         <div class="absolute">绝对定位元素</div>
  42.     </div>
  43.     <div class="fixed">固定定位元素</div>
  44. </body>
  45. </html>
复制代码

定位布局的优点是可以精确控制元素的位置，特别适合创建重叠效果、固定导航栏等特殊布局。但它的缺点是：

1. 绝对定位和固定定位使元素脱离文档流，可能影响其他元素的布局
2. 不适合创建整体页面布局，更适合用于局部特殊效果
3. 响应式设计困难

表格布局(Table)

表格布局使用CSS的display属性将元素模拟为表格单元格，实现类似表格的布局效果。主要属性包括：

• display: table: 使元素表现为表格
• display: table-row: 使元素表现为表格行
• display: table-cell: 使元素表现为表格单元格
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .table {
  7.             display: table;
  8.             width: 100%;
  9.         }
  10.         .row {
  11.             display: table-row;
  12.         }
  13.         .cell {
  14.             display: table-cell;
  15.             padding: 20px;
  16.             border: 1px solid #ccc;
  17.         }
  18.         .sidebar {
  19.             width: 25%;
  20.             background-color: #f0f0f0;
  21.         }
  22.         .content {
  23.             background-color: #e0e0e0;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="table">
  29.         <div class="row">
  30.             <div class="cell sidebar">
  31.                 <h3>侧边栏</h3>
  32.                 <p>这是侧边栏内容</p>
  33.             </div>
  34.             <div class="cell content">
  35.                 <h2>主要内容</h2>
  36.                 <p>这是主要内容区域</p>
  37.             </div>
  38.         </div>
  39.     </div>
  40. </body>
  41. </html>
复制代码

表格布局的优点是可以轻松实现等高列和垂直居中。但它的缺点是：

1. 语义不明确，表格布局应该用于表格数据，而不是页面布局
2. 嵌套层级多，代码复杂
3. 响应式设计困难
4. 不够灵活，难以实现复杂的布局

行内块布局(Inline-block)

行内块布局通过设置元素的display属性为inline-block，使元素既具有行内元素的特性（在一行内显示），又具有块级元素的特性（可以设置宽高、内外边距等）。
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .container {
  7.             font-size: 0; /* 消除行内块元素之间的间隙 */
  8.         }
  9.         .box {
  10.             display: inline-block;
  11.             width: 30%;
  12.             height: 150px;
  13.             margin-right: 3%;
  14.             background-color: #f0f0f0;
  15.             font-size: 16px; /* 恢复字体大小 */
  16.             vertical-align: top; /* 对齐方式 */
  17.         }
  18.         .box:last-child {
  19.             margin-right: 0;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="container">
  25.         <div class="box">
  26.             <h3>盒子1</h3>
  27.             <p>这是第一个盒子</p>
  28.         </div>
  29.         <div class="box">
  30.             <h3>盒子2</h3>
  31.             <p>这是第二个盒子</p>
  32.         </div>
  33.         <div class="box">
  34.             <h3>盒子3</h3>
  35.             <p>这是第三个盒子</p>
  36.         </div>
  37.     </div>
  38. </body>
  39. </html>
复制代码

行内块布局的优点是可以轻松实现水平排列的多个元素，并且可以控制它们的尺寸和对齐方式。但它的缺点是：

1. 元素之间会有间隙，需要额外处理（如设置父元素的font-size: 0）
2. 当元素高度不同时，对齐方式可能需要额外调整
3. 换行时可能产生不期望的空白
4. 响应式设计有限

现代布局方式

Flexbox布局

Flexbox（弹性盒子）是CSS3中引入的一种新的布局模式，它提供了更加有效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小是未知或者动态变化的。

Flexbox由容器（flex container）和项目（flex item）组成。容器通过设置display: flex或display: inline-flex来定义为flex容器，其直接子元素自动成为flex项目。

1. flex-direction: 决定主轴的方向row: 默认值，主轴为水平方向，起点在左端row-reverse: 主轴为水平方向，起点在右端column: 主轴为垂直方向，起点在上沿column-reverse: 主轴为垂直方向，起点在下沿
2. row: 默认值，主轴为水平方向，起点在左端
3. row-reverse: 主轴为水平方向，起点在右端
4. column: 主轴为垂直方向，起点在上沿
5. column-reverse: 主轴为垂直方向，起点在下沿
6. flex-wrap: 决定项目是否换行nowrap: 默认值，不换行wrap: 换行，第一行在上方wrap-reverse: 换行，第一行在下方
7. nowrap: 默认值，不换行
8. wrap: 换行，第一行在上方
9. wrap-reverse: 换行，第一行在下方
10. flex-flow:flex-direction和flex-wrap的简写默认值:row nowrap
11. 默认值:row nowrap
12. justify-content: 定义项目在主轴上的对齐方式flex-start: 默认值，左对齐flex-end: 右对齐center: 居中space-between: 两端对齐，项目之间的间隔都相等space-around: 每个项目两侧的间隔相等
13. flex-start: 默认值，左对齐
14. flex-end: 右对齐
15. center: 居中
16. space-between: 两端对齐，项目之间的间隔都相等
17. space-around: 每个项目两侧的间隔相等
18. align-items: 定义项目在交叉轴上的对齐方式flex-start: 交叉轴的起点对齐flex-end: 交叉轴的终点对齐center: 交叉轴的中点对齐baseline: 项目的第一行文字的基线对齐stretch: 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
19. flex-start: 交叉轴的起点对齐
20. flex-end: 交叉轴的终点对齐
21. center: 交叉轴的中点对齐
22. baseline: 项目的第一行文字的基线对齐
23. stretch: 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
24. align-content: 定义多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）flex-start: 与交叉轴的起点对齐flex-end: 与交叉轴的终点对齐center: 与交叉轴的中点对齐space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布space-around: 每根轴线两侧的间隔都相等stretch: 默认值，轴线占满整个交叉轴
25. flex-start: 与交叉轴的起点对齐
26. flex-end: 与交叉轴的终点对齐
27. center: 与交叉轴的中点对齐
28. space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
29. space-around: 每根轴线两侧的间隔都相等
30. stretch: 默认值，轴线占满整个交叉轴

flex-direction: 决定主轴的方向

• row: 默认值，主轴为水平方向，起点在左端
• row-reverse: 主轴为水平方向，起点在右端
• column: 主轴为垂直方向，起点在上沿
• column-reverse: 主轴为垂直方向，起点在下沿

flex-wrap: 决定项目是否换行

• nowrap: 默认值，不换行
• wrap: 换行，第一行在上方
• wrap-reverse: 换行，第一行在下方

flex-flow:flex-direction和flex-wrap的简写

• 默认值:row nowrap

justify-content: 定义项目在主轴上的对齐方式

• flex-start: 默认值，左对齐
• flex-end: 右对齐
• center: 居中
• space-between: 两端对齐，项目之间的间隔都相等
• space-around: 每个项目两侧的间隔相等

align-items: 定义项目在交叉轴上的对齐方式

• flex-start: 交叉轴的起点对齐
• flex-end: 交叉轴的终点对齐
• center: 交叉轴的中点对齐
• baseline: 项目的第一行文字的基线对齐
• stretch: 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

align-content: 定义多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）

• flex-start: 与交叉轴的起点对齐
• flex-end: 与交叉轴的终点对齐
• center: 与交叉轴的中点对齐
• space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around: 每根轴线两侧的间隔都相等
• stretch: 默认值，轴线占满整个交叉轴

1. order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0
2. flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3. flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小
5. flex:flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto
6. align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性auto: 默认值，表示继承父元素的align-items属性其他值与align-items属性相同
7. auto: 默认值，表示继承父元素的align-items属性
8. 其他值与align-items属性相同

order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0

flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小

flex:flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto

align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

• auto: 默认值，表示继承父元素的align-items属性
• 其他值与align-items属性相同
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .container {
  7.             display: flex;
  8.             flex-direction: row;
  9.             flex-wrap: wrap;
  10.             justify-content: space-between;
  11.             align-items: stretch;
  12.             width: 100%;
  13.             height: 400px;
  14.             background-color: #f0f0f0;
  15.             padding: 20px;
  16.             box-sizing: border-box;
  17.         }
  18.         .item {
  19.             flex: 0 0 30%;
  20.             margin-bottom: 20px;
  21.             padding: 20px;
  22.             background-color: #e0e0e0;
  23.             text-align: center;
  24.         }
  25.         .item:nth-child(2) {
  26.             align-self: center;
  27.             background-color: #d0d0d0;
  28.         }
  29.         .item:nth-child(3) {
  30.             flex-grow: 1;
  31.             background-color: #c0c0c0;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <div class="item">项目1</div>
  38.         <div class="item">项目2 (居中对齐)</div>
  39.         <div class="item">项目3 (可放大)</div>
  40.     </div>
  41. </body>
  42. </html>
复制代码

Flexbox布局的优点是：

1. 灵活性高，可以轻松实现各种复杂的布局
2. 不需要清除浮动，避免了浮动布局的问题
3. 可以轻松实现垂直居中、等高列等传统布局难以实现的效果
4. 响应式设计更加简单
5. 项目可以按照任意顺序排列，不受HTML结构限制

Flexbox布局的缺点是：

1. 浏览器兼容性问题，特别是在旧版浏览器中
2. 主要用于一维布局（行或列），对于二维布局（网格）不如Grid布局方便

Grid布局

Grid（网格）布局是CSS3中引入的另一种强大的布局系统，它将网页划分为一个个网格，可以任意组合不同的网格，做出各种各样的布局。与Flexbox主要用于一维布局不同，Grid布局专为二维布局设计。

Grid布局由容器（grid container）和项目（grid item）组成。容器通过设置display: grid或display: inline-grid来定义为grid容器，其直接子元素自动成为grid项目。

1. grid-template-columns: 定义列的宽度和数量可以使用固定值（如100px）、百分比（如20%）、自动填充（auto）或分数单位（fr）示例:grid-template-columns: 100px 1fr 2fr;
2. 可以使用固定值（如100px）、百分比（如20%）、自动填充（auto）或分数单位（fr）
3. 示例:grid-template-columns: 100px 1fr 2fr;
4. grid-template-rows: 定义行的高度和数量使用方式与grid-template-columns类似示例:grid-template-rows: 50px auto 100px;
5. 使用方式与grid-template-columns类似
6. 示例:grid-template-rows: 50px auto 100px;
7. grid-template-areas: 定义网格区域通过命名来定义网格区域示例:grid-template-areas: "header header header" "sidebar content content" "footer footer footer";
8. 通过命名来定义网格区域
9. 示例:grid-template-areas: "header header header" "sidebar content content" "footer footer footer";
10. grid-template:grid-template-columns、grid-template-rows和grid-template-areas的简写
11. grid-column-gap/grid-row-gap: 定义列/行之间的间距示例:grid-column-gap: 10px; grid-row-gap: 15px;
12. 示例:grid-column-gap: 10px; grid-row-gap: 15px;
13. grid-gap:grid-column-gap和grid-row-gap的简写示例:grid-gap: 10px 15px;
14. 示例:grid-gap: 10px 15px;
15. grid-auto-columns: 定义自动生成的列的大小
16. grid-auto-rows: 定义自动生成的行的大小
17. grid-auto-flow: 定义自动放置项目的算法row: 默认值，按行填充column: 按列填充dense: 尽可能紧密地填充网格
18. row: 默认值，按行填充
19. column: 按列填充
20. dense: 尽可能紧密地填充网格
21. justify-items: 定义项目在单元格内的水平对齐方式start: 左对齐end: 右对齐center: 居中对齐stretch: 默认值，拉伸占满单元格
22. start: 左对齐
23. end: 右对齐
24. center: 居中对齐
25. stretch: 默认值，拉伸占满单元格
26. align-items: 定义项目在单元格内的垂直对齐方式start: 顶部对齐end: 底部对齐center: 居中对齐stretch: 默认值，拉伸占满单元格
27. start: 顶部对齐
28. end: 底部对齐
29. center: 居中对齐
30. stretch: 默认值，拉伸占满单元格
31. place-items:align-items和justify-items的简写
32. justify-content: 定义整个内容区域在容器内的水平对齐方式start: 左对齐end: 右对齐center: 居中对齐stretch: 拉伸占满容器space-around: 每个项目两侧的间隔相等space-between: 两端对齐，项目之间的间隔都相等space-evenly: 每个项目之间的间隔相等
33. start: 左对齐
34. end: 右对齐
35. center: 居中对齐
36. stretch: 拉伸占满容器
37. space-around: 每个项目两侧的间隔相等
38. space-between: 两端对齐，项目之间的间隔都相等
39. space-evenly: 每个项目之间的间隔相等
40. align-content: 定义整个内容区域在容器内的垂直对齐方式值与justify-content相同
41. 值与justify-content相同
42. place-content:align-content和justify-content的简写

grid-template-columns: 定义列的宽度和数量

• 可以使用固定值（如100px）、百分比（如20%）、自动填充（auto）或分数单位（fr）
• 示例:grid-template-columns: 100px 1fr 2fr;

grid-template-rows: 定义行的高度和数量

• 使用方式与grid-template-columns类似
• 示例:grid-template-rows: 50px auto 100px;

grid-template-areas: 定义网格区域

• 通过命名来定义网格区域
• 示例:grid-template-areas: "header header header" "sidebar content content" "footer footer footer";

grid-template:grid-template-columns、grid-template-rows和grid-template-areas的简写

grid-column-gap/grid-row-gap: 定义列/行之间的间距

• 示例:grid-column-gap: 10px; grid-row-gap: 15px;

grid-gap:grid-column-gap和grid-row-gap的简写

• 示例:grid-gap: 10px 15px;

grid-auto-columns: 定义自动生成的列的大小

grid-auto-rows: 定义自动生成的行的大小

grid-auto-flow: 定义自动放置项目的算法

• row: 默认值，按行填充
• column: 按列填充
• dense: 尽可能紧密地填充网格

justify-items: 定义项目在单元格内的水平对齐方式

• start: 左对齐
• end: 右对齐
• center: 居中对齐
• stretch: 默认值，拉伸占满单元格

align-items: 定义项目在单元格内的垂直对齐方式

• start: 顶部对齐
• end: 底部对齐
• center: 居中对齐
• stretch: 默认值，拉伸占满单元格

place-items:align-items和justify-items的简写

justify-content: 定义整个内容区域在容器内的水平对齐方式

• start: 左对齐
• end: 右对齐
• center: 居中对齐
• stretch: 拉伸占满容器
• space-around: 每个项目两侧的间隔相等
• space-between: 两端对齐，项目之间的间隔都相等
• space-evenly: 每个项目之间的间隔相等

align-content: 定义整个内容区域在容器内的垂直对齐方式

• 值与justify-content相同

place-content:align-content和justify-content的简写

1. grid-column-start/grid-column-end/grid-row-start/grid-row-end: 定义项目的位置和大小可以指定具体的线编号或使用span关键字示例:grid-column-start: 1; grid-column-end: 3;或grid-column: 1 / 3;
2. 可以指定具体的线编号或使用span关键字
3. 示例:grid-column-start: 1; grid-column-end: 3;或grid-column: 1 / 3;
4. grid-column:grid-column-start和grid-column-end的简写示例:grid-column: 1 / 3;或grid-column: span 2;
5. 示例:grid-column: 1 / 3;或grid-column: span 2;
6. grid-row:grid-row-start和grid-row-end的简写使用方式与grid-column类似
7. 使用方式与grid-column类似
8. grid-area: 定义项目所在的区域可以指定具体的行和列，或者使用grid-template-areas中定义的区域名称示例:grid-area: 1 / 1 / 3 / 4;或grid-area: header;
9. 可以指定具体的行和列，或者使用grid-template-areas中定义的区域名称
10. 示例:grid-area: 1 / 1 / 3 / 4;或grid-area: header;
11. justify-self: 定义单个项目在单元格内的水平对齐方式值与容器的justify-items相同
12. 值与容器的justify-items相同
13. align-self: 定义单个项目在单元格内的垂直对齐方式值与容器的align-items相同
14. 值与容器的align-items相同
15. place-self:align-self和justify-self的简写

grid-column-start/grid-column-end/grid-row-start/grid-row-end: 定义项目的位置和大小

• 可以指定具体的线编号或使用span关键字
• 示例:grid-column-start: 1; grid-column-end: 3;或grid-column: 1 / 3;

grid-column:grid-column-start和grid-column-end的简写

• 示例:grid-column: 1 / 3;或grid-column: span 2;

grid-row:grid-row-start和grid-row-end的简写

• 使用方式与grid-column类似

grid-area: 定义项目所在的区域

• 可以指定具体的行和列，或者使用grid-template-areas中定义的区域名称
• 示例:grid-area: 1 / 1 / 3 / 4;或grid-area: header;

justify-self: 定义单个项目在单元格内的水平对齐方式

• 值与容器的justify-items相同

align-self: 定义单个项目在单元格内的垂直对齐方式

• 值与容器的align-items相同

place-self:align-self和justify-self的简写
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         .container {
  7.             display: grid;
  8.             grid-template-columns: 200px 1fr 200px;
  9.             grid-template-rows: 80px 1fr 60px;
  10.             grid-template-areas:
  11.                 "header header header"
  12.                 "sidebar content aside"
  13.                 "footer footer footer";
  14.             grid-gap: 10px;
  15.             width: 100%;
  16.             height: 100vh;
  17.             box-sizing: border-box;
  18.             padding: 10px;
  19.         }
  20.         .header {
  21.             grid-area: header;
  22.             background-color: #f0f0f0;
  23.             padding: 20px;
  24.         }
  25.         .sidebar {
  26.             grid-area: sidebar;
  27.             background-color: #e0e0e0;
  28.             padding: 20px;
  29.         }
  30.         .content {
  31.             grid-area: content;
  32.             background-color: #d0d0d0;
  33.             padding: 20px;
  34.         }
  35.         .aside {
  36.             grid-area: aside;
  37.             background-color: #c0c0c0;
  38.             padding: 20px;
  39.         }
  40.         .footer {
  41.             grid-area: footer;
  42.             background-color: #b0b0b0;
  43.             padding: 20px;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="container">
  49.         <div class="header">页眉</div>
  50.         <div class="sidebar">侧边栏</div>
  51.         <div class="content">主要内容</div>
  52.         <div class="aside">侧边栏2</div>
  53.         <div class="footer">页脚</div>
  54.     </div>
  55. </body>
  56. </html>
复制代码

Grid布局的优点是：

1. 强大的二维布局能力，可以同时控制行和列
2. 代码简洁，不需要复杂的嵌套结构
3. 可以轻松实现复杂的布局，如杂志风格的布局
4. 响应式设计更加简单，可以使用媒体查询轻松调整网格结构
5. 网格线命名和区域命名使代码更加语义化和可读

Grid布局的缺点是：

1. 浏览器兼容性问题，特别是在旧版浏览器中
2. 学习曲线较陡，需要理解的概念和属性较多
3. 对于简单的布局可能过于复杂

布局方式对比与选择

传统布局与现代布局的对比

如何选择合适的布局方式

选择合适的布局方式需要考虑以下几个因素：

1. 布局的复杂性简单的线性内容：正常文档流简单的多列布局：浮动布局或行内块布局复杂的一维布局：Flexbox复杂的二维布局：Grid
2. 简单的线性内容：正常文档流
3. 简单的多列布局：浮动布局或行内块布局
4. 复杂的一维布局：Flexbox
5. 复杂的二维布局：Grid
6. 浏览器兼容性需要支持旧版浏览器：浮动布局、表格布局现代浏览器：Flexbox、Grid
7. 需要支持旧版浏览器：浮动布局、表格布局
8. 现代浏览器：Flexbox、Grid
9. 响应式设计需求需要响应式设计：Flexbox、Grid固定布局：浮动布局、表格布局
10. 需要响应式设计：Flexbox、Grid
11. 固定布局：浮动布局、表格布局
12. 开发效率快速开发：Flexbox、Grid维护旧代码：浮动布局、表格布局
13. 快速开发：Flexbox、Grid
14. 维护旧代码：浮动布局、表格布局
15. 特定需求垂直居中：Flexbox、Grid等高列：表格布局、Flexbox、Grid重叠效果：定位布局
16. 垂直居中：Flexbox、Grid
17. 等高列：表格布局、Flexbox、Grid
18. 重叠效果：定位布局

布局的复杂性

• 简单的线性内容：正常文档流
• 简单的多列布局：浮动布局或行内块布局
• 复杂的一维布局：Flexbox
• 复杂的二维布局：Grid

浏览器兼容性

• 需要支持旧版浏览器：浮动布局、表格布局
• 现代浏览器：Flexbox、Grid

响应式设计需求

• 需要响应式设计：Flexbox、Grid
• 固定布局：浮动布局、表格布局

开发效率

• 快速开发：Flexbox、Grid
• 维护旧代码：浮动布局、表格布局

特定需求

• 垂直居中：Flexbox、Grid
• 等高列：表格布局、Flexbox、Grid
• 重叠效果：定位布局

实战案例：使用不同布局方式实现常见网页布局

三栏布局
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             overflow: hidden;
  14.         }
  15.         .header, .footer {
  16.             background-color: #f0f0f0;
  17.             padding: 20px;
  18.             text-align: center;
  19.         }
  20.         .content {
  21.             overflow: hidden;
  22.         }
  23.         .left-sidebar {
  24.             float: left;
  25.             width: 20%;
  26.             background-color: #e0e0e0;
  27.             padding: 20px;
  28.         }
  29.         .main-content {
  30.             float: left;
  31.             width: 60%;
  32.             background-color: #d0d0d0;
  33.             padding: 20px;
  34.         }
  35.         .right-sidebar {
  36.             float: right;
  37.             width: 20%;
  38.             background-color: #c0c0c0;
  39.             padding: 20px;
  40.         }
  41.         .clearfix::after {
  42.             content: "";
  43.             display: table;
  44.             clear: both;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="container">
  50.         <div class="header">页眉</div>
  51.         <div class="content clearfix">
  52.             <div class="left-sidebar">左侧边栏</div>
  53.             <div class="main-content">主要内容</div>
  54.             <div class="right-sidebar">右侧边栏</div>
  55.         </div>
  56.         <div class="footer">页脚</div>
  57.     </div>
  58. </body>
  59. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             display: flex;
  13.             flex-direction: column;
  14.             min-height: 100vh;
  15.         }
  16.         .header, .footer {
  17.             background-color: #f0f0f0;
  18.             padding: 20px;
  19.             text-align: center;
  20.         }
  21.         .content {
  22.             display: flex;
  23.             flex: 1;
  24.         }
  25.         .left-sidebar {
  26.             width: 20%;
  27.             background-color: #e0e0e0;
  28.             padding: 20px;
  29.         }
  30.         .main-content {
  31.             flex: 1;
  32.             background-color: #d0d0d0;
  33.             padding: 20px;
  34.         }
  35.         .right-sidebar {
  36.             width: 20%;
  37.             background-color: #c0c0c0;
  38.             padding: 20px;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="header">页眉</div>
  45.         <div class="content">
  46.             <div class="left-sidebar">左侧边栏</div>
  47.             <div class="main-content">主要内容</div>
  48.             <div class="right-sidebar">右侧边栏</div>
  49.         </div>
  50.         <div class="footer">页脚</div>
  51.     </div>
  52. </body>
  53. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             display: grid;
  13.             grid-template-areas:
  14.                 "header header header"
  15.                 "left-sidebar main-content right-sidebar"
  16.                 "footer footer footer";
  17.             grid-template-columns: 20% 1fr 20%;
  18.             grid-template-rows: auto 1fr auto;
  19.             min-height: 100vh;
  20.         }
  21.         .header {
  22.             grid-area: header;
  23.             background-color: #f0f0f0;
  24.             padding: 20px;
  25.             text-align: center;
  26.         }
  27.         .left-sidebar {
  28.             grid-area: left-sidebar;
  29.             background-color: #e0e0e0;
  30.             padding: 20px;
  31.         }
  32.         .main-content {
  33.             grid-area: main-content;
  34.             background-color: #d0d0d0;
  35.             padding: 20px;
  36.         }
  37.         .right-sidebar {
  38.             grid-area: right-sidebar;
  39.             background-color: #c0c0c0;
  40.             padding: 20px;
  41.         }
  42.         .footer {
  43.             grid-area: footer;
  44.             background-color: #b0b0b0;
  45.             padding: 20px;
  46.             text-align: center;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="header">页眉</div>
  53.         <div class="left-sidebar">左侧边栏</div>
  54.         <div class="main-content">主要内容</div>
  55.         <div class="right-sidebar">右侧边栏</div>
  56.         <div class="footer">页脚</div>
  57.     </div>
  58. </body>
  59. </html>
复制代码

网格布局
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             padding: 20px;
  14.         }
  15.         .grid {
  16.             overflow: hidden;
  17.         }
  18.         .grid-item {
  19.             float: left;
  20.             width: calc(33.333% - 20px);
  21.             margin: 10px;
  22.             background-color: #f0f0f0;
  23.             padding: 20px;
  24.             text-align: center;
  25.             height: 150px;
  26.         }
  27.         .clearfix::after {
  28.             content: "";
  29.             display: table;
  30.             clear: both;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="container">
  36.         <div class="grid clearfix">
  37.             <div class="grid-item">项目1</div>
  38.             <div class="grid-item">项目2</div>
  39.             <div class="grid-item">项目3</div>
  40.             <div class="grid-item">项目4</div>
  41.             <div class="grid-item">项目5</div>
  42.             <div class="grid-item">项目6</div>
  43.         </div>
  44.     </div>
  45. </body>
  46. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             padding: 20px;
  14.         }
  15.         .grid {
  16.             display: flex;
  17.             flex-wrap: wrap;
  18.             margin: -10px;
  19.         }
  20.         .grid-item {
  21.             flex: 0 0 calc(33.333% - 20px);
  22.             margin: 10px;
  23.             background-color: #f0f0f0;
  24.             padding: 20px;
  25.             text-align: center;
  26.             height: 150px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="container">
  32.         <div class="grid">
  33.             <div class="grid-item">项目1</div>
  34.             <div class="grid-item">项目2</div>
  35.             <div class="grid-item">项目3</div>
  36.             <div class="grid-item">项目4</div>
  37.             <div class="grid-item">项目5</div>
  38.             <div class="grid-item">项目6</div>
  39.         </div>
  40.     </div>
  41. </body>
  42. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             padding: 20px;
  14.         }
  15.         .grid {
  16.             display: grid;
  17.             grid-template-columns: repeat(3, 1fr);
  18.             grid-gap: 20px;
  19.         }
  20.         .grid-item {
  21.             background-color: #f0f0f0;
  22.             padding: 20px;
  23.             text-align: center;
  24.             height: 150px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="container">
  30.         <div class="grid">
  31.             <div class="grid-item">项目1</div>
  32.             <div class="grid-item">项目2</div>
  33.             <div class="grid-item">项目3</div>
  34.             <div class="grid-item">项目4</div>
  35.             <div class="grid-item">项目5</div>
  36.             <div class="grid-item">项目6</div>
  37.         </div>
  38.     </div>
  39. </body>
  40. </html>
复制代码

居中布局
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             height: 100vh;
  14.             position: relative;
  15.             background-color: #f0f0f0;
  16.         }
  17.         .centered {
  18.             position: absolute;
  19.             top: 50%;
  20.             left: 50%;
  21.             transform: translate(-50%, -50%);
  22.             width: 300px;
  23.             height: 200px;
  24.             background-color: #e0e0e0;
  25.             padding: 20px;
  26.             text-align: center;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="container">
  32.         <div class="centered">居中内容</div>
  33.     </div>
  34. </body>
  35. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             height: 100vh;
  14.             display: flex;
  15.             justify-content: center;
  16.             align-items: center;
  17.             background-color: #f0f0f0;
  18.         }
  19.         .centered {
  20.             width: 300px;
  21.             height: 200px;
  22.             background-color: #e0e0e0;
  23.             padding: 20px;
  24.             text-align: center;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="container">
  30.         <div class="centered">居中内容</div>
  31.     </div>
  32. </body>
  33. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             width: 100%;
  13.             height: 100vh;
  14.             display: grid;
  15.             place-items: center;
  16.             background-color: #f0f0f0;
  17.         }
  18.         .centered {
  19.             width: 300px;
  20.             height: 200px;
  21.             background-color: #e0e0e0;
  22.             padding: 20px;
  23.             text-align: center;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="container">
  29.         <div class="centered">居中内容</div>
  30.     </div>
  31. </body>
  32. </html>
复制代码

响应式设计与布局

响应式设计是一种网页设计方法，使网页能够在不同设备和屏幕尺寸上提供最佳的浏览体验。CSS布局方式在响应式设计中起着关键作用。

媒体查询

媒体查询是响应式设计的核心技术，它允许我们根据设备的特性（如视口宽度、高度、方向等）应用不同的CSS样式。
  2. /* 基本样式 */
  3. .container {
  4.     width: 100%;
  5.     padding: 20px;
  6. }
  8. /* 当视口宽度小于768px时应用的样式 */
  9. @media (max-width: 768px) {
  10.     .container {
  11.         padding: 10px;
  12.     }
  13. }
  15. /* 当视口宽度在768px到1024px之间时应用的样式 */
  16. @media (min-width: 768px) and (max-width: 1024px) {
  17.     .container {
  18.         padding: 15px;
  19.     }
  20. }
  22. /* 当视口宽度大于1024px时应用的样式 */
  23. @media (min-width: 1024px) {
  24.     .container {
  25.         max-width: 1200px;
  26.         margin: 0 auto;
  27.     }
  28. }
复制代码

响应式布局技术
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             display: flex;
  13.             flex-wrap: wrap;
  14.             width: 100%;
  15.         }
  16.         .item {
  17.             flex: 1 0 300px;
  18.             margin: 10px;
  19.             padding: 20px;
  20.             background-color: #f0f0f0;
  21.             text-align: center;
  22.         }
  23.         /* 当视口宽度小于768px时，每个项目占满一行 */
  24.         @media (max-width: 768px) {
  25.             .item {
  26.                 flex: 1 0 100%;
  27.             }
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="container">
  33.         <div class="item">项目1</div>
  34.         <div class="item">项目2</div>
  35.         <div class="item">项目3</div>
  36.         <div class="item">项目4</div>
  37.     </div>
  38. </body>
  39. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         .container {
  12.             display: grid;
  13.             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  14.             grid-gap: 20px;
  15.             width: 100%;
  16.             padding: 20px;
  17.         }
  18.         .item {
  19.             padding: 20px;
  20.             background-color: #f0f0f0;
  21.             text-align: center;
  22.         }
  23.         /* 当视口宽度小于768px时，每个项目占满一行 */
  24.         @media (max-width: 768px) {
  25.             .container {
  26.                 grid-template-columns: 1fr;
  27.             }
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="container">
  33.         <div class="item">项目1</div>
  34.         <div class="item">项目2</div>
  35.         <div class="item">项目3</div>
  36.         <div class="item">项目4</div>
  37.     </div>
  38. </body>
  39. </html>
复制代码

响应式图片和媒体

响应式设计不仅涉及布局，还包括图片和其他媒体元素的响应式处理。
  2. /* 响应式图片 */
  3. img {
  4.     max-width: 100%;
  5.     height: auto;
  6. }
  8. /* 响应式视频 */
  9. .video-container {
  10.     position: relative;
  11.     padding-bottom: 56.25%; /* 16:9 比例 */
  12.     height: 0;
  13.     overflow: hidden;
  14. }
  16. .video-container iframe,
  17. .video-container object,
  18. .video-container embed {
  19.     position: absolute;
  20.     top: 0;
  21.     left: 0;
  22.     width: 100%;
  23.     height: 100%;
  24. }
复制代码

总结与展望

CSS布局的发展历程

CSS布局技术经历了从简单到复杂、从传统到现代的演变过程：

1. 早期阶段：主要使用正常文档流和表格布局，布局能力有限。
2. 浮动时代：浮动布局成为主流，实现了多列布局，但也带来了清除浮动等问题。
3. 定位与行内块：定位布局提供了精确控制元素位置的能力，行内块布局简化了水平排列。
4. 现代布局：Flexbox和Grid的出现彻底改变了CSS布局的方式，提供了更强大、更灵活的布局能力。

最佳实践

1. 选择合适的布局方式：根据项目需求、浏览器兼容性和开发效率选择最合适的布局方式。
2. 优先使用现代布局：对于新项目，优先考虑使用Flexbox和Grid布局，它们提供了更强大、更灵活的布局能力。
3. 渐进增强：在需要支持旧浏览器的情况下，可以采用渐进增强的策略，先使用传统布局确保基本功能，再使用现代布局增强体验。
4. 语义化HTML：无论使用哪种布局方式，都应保持HTML的语义化，使用合适的标签描述内容结构。
5. 响应式设计：考虑不同设备和屏幕尺寸，使用媒体查询和弹性布局确保在各种环境下都能提供良好的用户体验。

未来展望

CSS布局技术仍在不断发展，未来可能会出现更多新的布局特性和技术：

1. 容器查询：允许基于父容器的尺寸而非视口尺寸应用样式，这将使组件级别的响应式设计更加容易。
2. 子网格（Subgrid）：Grid布局的扩展，允许网格项目继承父网格的轨道，创建更复杂的嵌套网格布局。
3. 锚点定位（Anchor Positioning）：允许元素相对于其他元素定位，而不仅仅是相对于父容器或视口。
4. 更多布局模块：CSS工作组可能会开发更多专门的布局模块，以解决特定类型的布局问题。

结语

CSS布局是前端开发的核心技能之一，掌握各种布局方式及其适用场景对于创建高质量、响应式的网页至关重要。从传统的浮动布局到现代的Flexbox和Grid布局，每种技术都有其优缺点和适用场景。通过深入理解这些布局技术，并结合实际项目需求选择合适的方案，我们可以创建出既美观又实用的网页布局，为用户提供优秀的浏览体验。

随着Web技术的不断发展，CSS布局技术也在不断演进。作为前端开发者，我们需要保持学习的态度，紧跟技术发展的步伐，不断提升自己的布局技能，以应对日益复杂的网页设计需求。
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
次元宅社
次元宅社
开放、共创，CHANGE SEKAI！
频道订阅

频道订阅

加入社群

加入社群

联系我们|TG频道|RSS

Powered by Pixtech

© 2025 Pixtech Team.