CSS高级布局（Flex、Grid、BFC）专题测试

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下代码中，关于.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; }

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

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

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

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