CSS布局：从常规流到FlexBox和Grid-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54400160/article/details/126003274

本文详细介绍了CSS布局中的行级和块级元素，包括常规流、行级排版上下文IFC、块级排版上下文BFC、display:table以及FlexBox和Grid布局。通过实例展示了如何使用这些布局方式实现不同效果，如居中对齐、外边距重叠问题等，深入理解CSS布局机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局分为三个板块

常规流：行级、块级、表格布局、FlexBox、Grid布局
浮动float
定位position

一个盒子的基本构造：

width

指定content box宽度

取值为长度，百分数，auto

auto由浏览器根据其它属性确定, 百分数相对于容器的content box宽度

height

指定content box高度

取值为长度，百分数，auto

auto取值由内容计算得来, 百分数相对于容器的content box高度，容器有指定高度时，百分数才生效

padding

指定元素四个方向的内边距，百分数相对于容器宽度

值的取值可以为一个(四变都相同)，两个(上下，左右)，三个(未指定的内边距与对边相同)，四个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QuaU0dEr-1658840754241)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a3630dc4bce4f2eb6b543e56080920e~tplv-k3u1fbpfcp-watermark.image?)]

border

指定容器的边框样式，粗细，颜色（border-width,border-style,border-color)，也有四个方向

一般简写为：1px solid blue
但当四条边框颜色不同时：

margin

指定元素四个方向的外边距
取值可以为长度，百分数，auto
百分数相对于容器宽度

运用：

使用margin:0 auto让盒子水平居中
margin collapse外边距重叠问题:

当同时设置margin-top和margin-bottom属性时，实际会取较大值来作为两者之间间距
所以遇到上下两个并排块，最好只设置其中一个的margin就行

box-sizing:border-box

设置该属性后，width就变成content-width+padding+border

overflow

取值：visible(默认),hidden,scroll

1、行级和块级

display属性

2 、常规流 Normal Flow

1、根元素、浮动、绝对定位的元素会脱离常规流

2、其它元素都在常规流之内(in-flow)

3、常规流中的盒子，在某种排版上下文中参与布局

2.1 行级排版上下文IFC

只包含行级盒子的容器会创建一个IFC
IFC内的排版规则：

何在一行内水平摆放

一行放不下时，换行显示

text-align 决定一行内盒子的水平对其

vertical-align 决定一个盒子在行内的垂直对齐

避开浮动元素*

2.2 块级排版上下文BFC

某些容器会创建一个BFC

根元素

浮动、绝对定位、inline-block

Flex子项和Grid子项

overflow不是visible的块盒

display:flow-root;

BFC内的排版规则：

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

2.3 display:table

几乎与table系的元素相对应

属性	说明
table	（类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table	（类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group	（类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group	（类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group	（类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row	（类似 <tr>）此元素会作为一个表格行显示。
table-column-group	（类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column	（类似 <col>）此元素会作为一个单元格列显示。
table-cell	（类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption	（类似 <caption>）此元素会作为一个表格标题显示。

2.4 FlexBox

它可以控制子级盒子的：

摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

步骤：

首先设置一个flex容器，然后将父元素(容器)设置display:flex;
设置父元素(容器)属性：

设置属性flex-direction：定义容器要在哪个方向上堆叠 flex 项目。

设置属性flex-wrap:规定是否应该对 flex 项目换行.
- nowrap:不换行(默认)
- wrap:必要时进行换行(切换浏览器窗口大小可观察)
- wrap-reverse:规定弹性项目将以相反的顺序换行（如有必要）

设置flex-flow属性：简写上述两个属性，例如flex-flow:row wrap;

设置justify-content属性:用于对齐 flex 项目.

默认为flex-start

设置属性align-items:用于垂直对齐 flex 项目。

应用：完美居中

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

设置子元素（项目）属性：flex 容器的直接子元素会自动成为弹性（flex）项目。

order属性：规定flex项目顺序,必须是数字，默认为0.
例如：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

结果为：

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

注：该数值必须为数字，默认是0

例如：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

结果：

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

例如：

<div class="flex-container">
 <div>1</div>
 <div>2</div>
 <div style="flex-shrink: 0">3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10</div>
</div>

结果：

flex-basis 属性规定 flex 项目的初始长度

例如：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

结果：

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

例如：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

结果：

3、 Grid布局

display:grid 使元素生成一个块级的Grid容器
使用gird-template相关属性将容器划分成网格
设置每一个子项占哪些行/列

3.1 网格布局模块

grid columns:网格项的垂直线

grid rows:网格项的水平线

grid gaps:每列/行之间的间隔

grid-row-gap:调节行之间缝隙
grid-column-gap:调节列之间缝隙
grir-gap:grid-row-gap 和 grid-column-gap 属性的简写属性,若为一个值表示同时设置为此值

例如：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

结果：

gird lines:列之间的线称为列线（column lines）,行之间的线称为行线（row lines）

实例：把网格项目放在列线 1，并在列线 3 结束它：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

结果：

3.2 网格容器

网格容器由放置在列和行内的网格项目组成。

grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。

如果所有列都应当有相同的宽度，则设置为 "auto"

例如:生成包含4列的网格

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

结果：

grid-template-rows 属性定义每列的高度
例如：

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

结果：

justify-content 属性用于在容器内对齐整个网格。

注意：网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。

取值与flex中的几乎相同，只是顶部对齐为start,底部对齐为end

align-content 属性用于垂直对齐容器内的整个网格。

注意：网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。

取值与justify-content相同

3.3 网格项目

子元素（项目）:网格容器包含网格项目

grid-column 属性定义将项目放置在哪一列上,可以定义项目的开始位置以及结束位置。

如需放置某个项目，可以引用行号"/"，或使用关键字 “span” 来定义该项目将跨越多少列。

实例1:
使 “item1” 从第 1 列开始并在第 5 列之前结束：

.item1 {
  grid-column: 1 / 5;
}

结果：

实例2：使 “item2” 从第 2 列开始，并跨越 3 列：

.item2 {
  grid-column: 2 / span 3;
}

结果：

grid-row 属性定义了将项目放置在哪一行,可以定义项目的开始位置以及结束位置。

与grid-column使用相同

grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性

例如：

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

结果：

命名网格项:可以通过网格容器的 grid-template-areas 属性来引用命名的网格项目。

每行由撇号（’ '）定义。

每行中的列都在撇号内定义，并以空格分隔。

句号表示没有名称的网格项目。

实例1：item1 的名称是 “myArea”，并跨越五列网格布局中的所有五列：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

结果：

实例2：让 “myArea” 跨越五列网格布局中的两列（句号代表没有名称的项目）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

结果：

实例3：命名所有项目，并制作一张随时可用的网页模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

结果：