CSS高级布局(Flex、Grid、BFC)专题测试
考察知识点
- Flexbox布局基础与属性配置(flex-direction、justify-content、align-items等)
- Flex容器与Flex项目的特性
- Grid布局基础与属性配置(grid-template-columns、grid-template-rows等)
- Grid区域命名与网格线定位
- BFC触发条件与应用场景
- 布局方案选择与最佳实践
下列哪个CSS属性声明不能触发BFC(块级格式化上下文)?
BFC(块级格式化上下文)在实际开发中有哪些典型应用场景?
BFC(块级格式化上下文)中的元素会按照从左到右、从上到下的顺序排列,而IFC(行内格式化上下文)中的元素会按照从左到右的顺序水平排列。
BFC具有三个重要特性:1. BFC区域不会与________重叠;2. 计算BFC高度时会______________;3. 属于同一个BFC的两个相邻块级元素的垂直外边距会发生______。
以下哪些display属性值会创建新的BFC(块级格式化上下文)?
以下代码中,两个相邻div元素的垂直外边距会合并的是:
在Grid布局中,grid-template-columns: repeat(3, minmax(100px, 1fr)); 表示什么含义?
关于CSS Grid中的repeat()函数,以下说法正确的有?
在CSS Grid中,minmax()函数接受两个参数,分别表示轨道的________和________。其中,min参数可以使用min-content、长度值或百分比,但不能使用______;max参数可以使用fr单位、长度值、百分比或___________。
在Flex布局中,设置gap: 20px 10px的效果是?
在Flex布局中,gap属性与margin设置项目间距的主要区别是:gap只在____________产生间距,而margin会在项目的________产生外边距;使用gap设置间距时,不需要像margin那样需要特殊处理____________的外边距问题。
关于CSS Grid中的fr单位,以下说法正确的有?
在Flex布局中,实现等高布局最简单的方式是?
Flex容器设置了align-items: stretch,但某个flex项目设置了align-self: flex-start,该项目的高度会如何表现?
在Flex布局中,align-self属性用于设置____________在交叉轴上的对齐方式。当align-self设置为______时,项目会继承父容器的___________属性值。align-self的可选值包括flex-start、flex-end、______、stretch和baseline。
在CSS Grid的minmax()函数中,可以将fr单位作为最小值参数使用,如minmax(1fr, 300px)是有效的写法。
在Flex布局中,当flex-direction设置为column时,align-items: stretch会使所有flex项目自动等宽。
以下哪种方式可以在Flex布局中同时实现等高布局和项目间距?
以下代码中,关于.item-a和.item-b的最终布局效果,说法正确的有?
.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; }
📝 发现内容有误?点击此处直接编辑
长按或扫描二维码,立即体验