CSS布局

CSS中的浮动（float）属性最初设计用于实现文字环绕图片效果，浮动元素会脱离正常文档流，但仍会影响周围行内元素的布局。

以下哪个不是CSS中float属性的有效值？

以下哪种方式不是清除浮动的有效方法？

以下哪些是CSS中clear属性的有效值？

当父元素只包含浮动子元素时，父元素的高度会塌陷为0。这是因为浮动元素脱离了正常文档流。解决方法之一是让父元素创建 ______（块级格式化上下文）。

常见的触发方式包括：

• overflow 值为 hidden 或 ______
• display 值为 flow-root 或 ______ 或 grid

浮动元素会导致父元素高度塌陷，这是因为浮动元素完全脱离了文档流，父元素在计算高度时不会考虑浮动子元素的高度。

CSS中的position属性用于控制元素的定位方式，默认值是static，表示元素按照正常文档流进行布局。

以下关于CSS定位的说法，哪个是正确的？

补全以下CSS定位代码：

/* 固定定位 - 元素固定在视口指定位置 */
.fixed-box {
  position: !!1_fixed!!;
  top: 20px;
  right: 20px;
}

/* 粘性定位 - 滚动时切换定位方式 */
.sticky-header {
  position: !!2_sticky!!;
  top: 0;
}

/* 绝对定位 - 相对于定位祖先 */
.absolute-box {
  position: !!3_absolute!!;
  top: 50%;
  left: 50%;
}

CSS Flexbox是一种一维布局模型，它可以在一个方向上（行或列）排列子元素，适合处理组件级别的布局需求。

在CSS中，以下哪个属性值可以将容器设置为Flex布局？

CSS的flex简写属性可以一次性设置哪些属性？

在Flex布局中，主轴和交叉轴的对齐由不同属性控制：

.container {
  display: flex;
  /* 主轴方向对齐 */
  _______________: center;
  /* 交叉轴方向对齐 */
  ___________: center;
  /* 主轴方向：水平排列 */
  flex-direction: row;
}

在Flex容器中，默认情况下子元素不会换行，即使设置了固定宽度。要允许子元素换行显示，需要设置flex-wrap属性为wrap。

CSS Grid布局是一种二维布局模型，可以同时控制行和列两个方向的元素排列，非常适合用于页面整体布局和复杂网格设计。

以下CSS代码创建了几列的Grid布局？

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

在CSS Grid布局中，fr单位表示什么？

以下哪个CSS属性用于设置Grid子元素之间的间距？

以下哪些是Grid容器的有效属性？

使用repeat函数简化以下Grid代码：

/* 原代码 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 简化后 */
.container {
  display: grid;
  grid-template-columns: !!1_repeat(4, 1fr)!!;
}

repeat函数还可以与auto-fit配合使用：

.grid {
  grid-template-columns: !!2_repeat(auto-fit, minmax(200px, 1fr))!!;
}