全部学科

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Web前端

TypeScript vue CSS HTML javascript pinia vite

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Python全栈

NodeJS全栈

GO后端

golang gorm gin

小程序首页

📝 1 篇文章 20 道配套习题

CSS高级布局（Flex、Grid、BFC）

专题说明

CSS高级布局专题聚焦现代CSS布局三大核心技术：Flex弹性布局、Grid网格布局和BFC块级格式化上下文。这些技术是解决复杂布局问题的关键，掌握它们能大幅提升CSS开发效率和布局能力。

学习目标

理解BFC触发条件与应用场景（清除浮动、防止margin重叠）
掌握Flex布局的容器属性与项目属性
熟练使用Grid布局定义网格、放置项目、响应式适配
区分Flex与Grid的应用场景，灵活选择布局方案
掌握fr单位、auto-fit/auto-fill等高级特性

学习内容

BFC块级格式化上下文：触发条件、布局规则、应用场景
Flex弹性布局：flex-direction、justify-content、align-items、flex-wrap、flex-grow/shrink/basis
Flex项目属性：order、align-self、flex属性简写
Grid网格布局：grid-template-columns/rows、gap、grid-area、grid-template-areas
Grid高级特性：fr单位、minmax()、auto-fit/auto-fill、命名区域布局

学习建议

先理解BFC概念，掌握清除浮动和margin重叠问题的解决方案
Flex布局适合一维布局（行或列），Grid适合二维布局
重点练习Grid的fr单位和auto-fit/auto-fill，这是响应式布局利器
结合实际场景（导航栏、卡片列表、圣杯布局）练习布局技能

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1

单选题

下列哪个CSS属性声明不能触发BFC（块级格式化上下文）？

A

overflow: hidden

B

display: inline-block

C

position: relative

D

float: left

2

多选题

BFC（块级格式化上下文）在实际开发中有哪些典型应用场景？

A

清除浮动导致的父元素高度塌陷

B

阻止外边距合并（margin collapse）

C

实现元素水平垂直居中

D

阻止元素被浮动元素覆盖

3

判断题

BFC（块级格式化上下文）中的元素会按照从左到右、从上到下的顺序排列，而IFC（行内格式化上下文）中的元素会按照从左到右的顺序水平排列。

A

对

B

错

4

填空题

BFC具有三个重要特性：1. BFC区域不会与________重叠；2. 计算BFC高度时会______________；3. 属于同一个BFC的两个相邻块级元素的垂直外边距会发生______。

5

多选题

以下哪些display属性值会创建新的BFC（块级格式化上下文）？

A

display: flow-root

B

display: inline-block

C

display: table-cell

D

display: block

6

单选题

以下代码中，两个相邻div元素的垂直外边距会合并的是：

A

两个相邻的div，各自设置了margin-top: 20px，且它们在同一个BFC中

B

父元素设置了overflow: hidden，子元素设置margin-top: 20px

C

两个相邻的div，父元素分别对它们设置了overflow: hidden形成独立BFC

D

两个相邻的div，中间有一个设置了height: 0的空div分隔

7

单选题

在Grid布局中，grid-template-columns: repeat(3, minmax(100px, 1fr)); 表示什么含义？

A

创建3列，每列最小宽度100px，最大宽度为容器宽度的1/3

B

创建3列，每列固定宽度100px

C

创建3列，每列宽度均为容器宽度的1/3，但不能小于100px

D

创建3列，每列宽度在100px到1fr之间可变

8

多选题

关于CSS Grid中的repeat()函数，以下说法正确的有？

A

repeat()可以与固定值混用，如 grid-template-columns: 200px repeat(3, 1fr)

B

repeat(auto-fill, 100px) 会自动创建尽可能多的100px宽度的列

C

repeat()中只能使用固定数值作为第一个参数

D

repeat(auto-fit, minmax(100px, 1fr)) 可以实现响应式网格布局

9

填空题

在CSS Grid中，minmax()函数接受两个参数，分别表示轨道的________和________。其中，min参数可以使用min-content、长度值或百分比，但不能使用______；max参数可以使用fr单位、长度值、百分比或___________。

10

单选题

在Flex布局中，设置gap: 20px 10px的效果是？

A

主轴方向间距20px，交叉轴方向间距10px

B

行间距20px，列间距10px

C

所有项目之间间距均为20px，边缘间距为10px

D

第一个参数设置row-gap，第二个参数设置column-gap

11

填空题

在Grid布局中，设置grid-template-columns: 100px 2fr 1fr 100px;，容器宽度为800px时，四列的宽度分别为______、______、______、______。fr单位计算时会先扣除____________占用的空间，然后将剩余空间按fr比例分配。

12

填空题

在Flex布局中，align-self属性用于设置____________在交叉轴上的对齐方式。当align-self设置为______时，项目会继承父容器的___________属性值。align-self的可选值包括flex-start、flex-end、______、stretch和baseline。

13

多选题

关于Grid布局中的grid-template-areas和grid-area，以下说法正确的有？

A

grid-template-areas中的区域名称必须用引号包裹，每行一个字符串

B

子元素使用grid-area属性指定要放置的区域名称

C

未命名的网格单元格使用点号(.)表示

D

一个区域名称可以同时出现在多行多列中，形成跨区域布局

14

单选题

在Flex布局中，order属性的默认值是多少，数值越大项目的排列位置越靠后？

A

order默认值为1

B

order默认值为0

C

order默认值为-1

D

order默认值取决于flex-direction

15

多选题

关于Flex布局中的order属性，以下说法正确的有？

A

order可以改变flex项目的DOM结构顺序

B

order可以接受负数值

C

order不影响屏幕阅读器读取内容的顺序

D

order常用于响应式设计中的布局调整

16

填空题

在Flex布局中，order属性的默认值为______，数值越______的项目排列位置越靠前。order只改变______排列顺序，不影响______结构顺序，因此屏幕阅读器仍按源代码顺序读取内容。

17

单选题

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))与repeat(auto-fill, minmax(100px, 1fr))的主要区别是什么？

A

auto-fit创建的列数更多

B

auto-fill会保留空轨道，auto-fit会折叠空轨道并扩展现有列

C

auto-fill适用于固定宽度列，auto-fit适用于弹性宽度列

D

两者效果完全相同

18

填空题

在CSS Grid中，auto-fill和auto-fit都会根据________自动计算能创建的轨道数量。区别在于：auto-fill会______空轨道，而auto-fit会______空轨道并将空间分配给________。因此，auto-fit更适合内容自适应的响应式布局。

19

多选题

以下代码中，关于.item-a和.item-b的最终布局效果，说法正确的有？

CSS

.container { display: flex; flex-direction: row; align-items: center; }
.item-a { order: 2; align-self: flex-start; }
.item-b { order: -1; align-self: flex-end; }

A

.item-b会在视觉上排在最前面（最左侧）

B

.item-a会垂直居中对齐

C

.item-b会在容器底部对齐

D

两项目的order和align-self设置都会生效

20

单选题

以下响应式Grid布局代码，在屏幕宽度小于600px时，布局结构如何变化？

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}
@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
  }
}

A

所有区域变成单列垂直排列，顺序为header→main→sidebar→aside→footer

B

三列布局变为两列布局

C

部分区域被隐藏

D

布局顺序为header→sidebar→main→aside→footer

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验