全部学科
Python全栈
python
NodeJS全栈
nodejs
小程序首页

CSS高级布局(Flex、Grid、BFC)专题测试

19 题 50 分钟 难度:

考察知识点

  • Flexbox布局基础与属性配置(flex-direction、justify-content、align-items等)
  • Flex容器与Flex项目的特性
  • Grid布局基础与属性配置(grid-template-columns、grid-template-rows等)
  • Grid区域命名与网格线定位
  • BFC触发条件与应用场景
  • 布局方案选择与最佳实践
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
填空题

在Flex布局中,gap属性与margin设置项目间距的主要区别是:gap只在____________产生间距,而margin会在项目的________产生外边距;使用gap设置间距时,不需要像margin那样需要特殊处理____________的外边距问题。

12
多选题

关于CSS Grid中的fr单位,以下说法正确的有?

A

fr单位只能在minmax()函数中使用

B

fr单位会自动分配容器中除去固定尺寸轨道后的剩余空间

C

1fr等于容器宽度的100%

D

fr单位可以与固定单位混用,如 grid-template-columns: 200px 1fr 1fr

13
单选题

在Flex布局中,实现等高布局最简单的方式是?

A

为每个子元素设置相同的height值

B

设置align-items: stretch(默认值)

C

使用JavaScript动态计算最大高度并同步设置

D

设置flex-grow: 1

14
单选题

Flex容器设置了align-items: stretch,但某个flex项目设置了align-self: flex-start,该项目的高度会如何表现?

A

与其他flex项目保持等高

B

高度为自身内容高度,不拉伸

C

高度为0,内容溢出

D

高度等于容器高度

15
填空题

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

16
判断题

在CSS Grid的minmax()函数中,可以将fr单位作为最小值参数使用,如minmax(1fr, 300px)是有效的写法。

A

B

17
判断题

在Flex布局中,当flex-direction设置为column时,align-items: stretch会使所有flex项目自动等宽。

A

B

18
单选题

以下哪种方式可以在Flex布局中同时实现等高布局和项目间距?

A

设置align-items: stretch并使用gap属性

B

设置所有项目相同height并使用margin

C

设置flex-grow: 1并使用gap属性

D

设置justify-content: space-between

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设置都会生效

← 上一个试卷 CSS高级动画与性能优化
下一个试卷 → CSS高级技能认证试卷

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

想参加完整模拟考试?
小程序提供计时考试、自动评分和详细解析

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

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库