5. CSS 布局

学习成果

• 了解正常流是浏览器布局块级和内联内容的默认方式。
• 诸如 display、float 和 position 之类的属性旨在更改浏览器布局内容的方式。

资源

• CSS 布局简介
• 正常流

学习成果

• 了解浮动的目的——用于在文本列中浮动图像，或者可能用于其他有趣的技术，如首字母下沉和浮动内嵌信息框。
• 了解浮动以前用于多列布局，但现在不再如此，因为有更好的工具可用（有关详细信息，请参阅 5.4 现代布局）。
• 使用 float 属性创建浮动。
• 使用 clear 和 display: flow-root 值清除浮动。

资源

• 浮动
• 浮动全解，CSS-Tricks (2021)

学习成果

• 了解 static 定位是元素在页面上定位的默认方式。
• 相对定位
  • 了解相对定位的元素保留在正常流中。
  • 可以使用 top、bottom、left 和 right 属性修改最终布局位置。
• 绝对定位
  • 绝对（和固定/粘性）定位将元素完全从正常流中取出，使其处于单独的层中。
  • top、bottom、left、right 和 inset 对绝对定位元素的影响不同于相对定位元素。
  • 通过定位祖先元素来设置定位元素的定位上下文。
• 固定和粘性定位
  • 了解这些定位与绝对定位的区别。
• 了解什么是 z-index 以及如何使用 z-index 属性控制定位元素的堆叠顺序。

资源

• 定位
• 旁注：Position: relative & absolute，Scrimba 课程合作伙伴
• 堆叠上下文

学习成果

• 一般来说，要了解现代 CSS 布局技术。
• 了解，对于基本的放置任务，以下工具可能过于复杂。学习简单的传统技术以及它们仍然有效的场景
  • 用于间距的边距和填充。
  • 用于水平居中任务的自动边距（例如 margin: 0 auto）。
• Flexbox
  • 了解 Flexbox 的目的——在一个维度上灵活地布局一组块级或内联元素。
    • 请参阅 我们有一个 Flexbox 可以解决的问题，由 Scrimba 课程合作伙伴 提供，了解用例示例。
  • 了解 Flex 术语——Flex 容器、Flex 项目、主轴和交叉轴。
  • display: flex 以及它默认提供的内容。
  • 行和列，以及如何将内容换行到新行和列。
  • Flex 项目的灵活大小调整。
  • 对齐和调整内容。
  • 调整 Flex 项目排序。
• CSS Grid
  • 了解 CSS Grid 的目的——在二维空间中灵活地布局一组块级或内联元素。
  • 了解 Grid 术语——行、列、间隙和槽。
  • display: grid 以及它默认提供的内容。
  • 定义网格行和列
    • fr 单位。
    • minmax().
  • 定义间隙。
  • 在网格上定位元素。

资源

• Flexbox
• 网格

学习成果

• 了解什么是响应式设计——设计 Web 布局，使其灵活且在不同的设备屏幕尺寸、分辨率等上都能正常工作。
• 了解现代布局工具（如 Grid 和 Flexbox）与响应式设计之间的关系。
• 媒体查询
  • 移动优先技术。
  • 了解断点。
  • 使用 width 和 height 媒体查询创建响应式布局。
• <meta viewport=""> 以及如何使用它使 Web 文档在移动设备上正确显示。
  • 出于无障碍目的，永远不要设置 user-scalable=no。

资源

• 构建响应式网站：模块简介，Scrimba 课程合作伙伴
• 响应式设计
• 媒体查询初学者指南