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 的目的——在一维空间中灵活地布局一组块级或内联元素。

    • 请参阅 Scrimba 课程合作伙伴的 我们有一个 flexbox 可以解决的问题 以获取用例示例。

  • 理解 flex 术语——flex 容器、flex 项、主轴和交叉轴。

  • display: flex，以及它默认提供的功能。

  • 行和列，以及如何将内容换行到新行和新列。

  • flex 项的灵活调整大小。

  • 对齐和分布内容。

  • 调整 flex 项的顺序。

• CSS Grid

  • 理解 CSS Grid 的目的——在二维空间中灵活地布局一组块级或内联元素。

  • 理解 grid 术语——行、列、间隙和沟槽。

  • display: grid，以及它默认提供的功能。

  • 定义 grid 行和列

    • fr 单位。

    • minmax().

  • 定义间隙。

  • 在 grid 上定位元素。

资源

• Flexbox

• Grid

学习成果

• 理解什么是响应式设计——设计 Web 布局，使其具有灵活性，并能在不同的设备屏幕尺寸、分辨率等方面良好运行。

• 理解现代布局工具（如 grid 和 flexbox）与响应式设计之间的关系。

• 媒体查询

  • 移动优先技术。

  • 理解断点。

  • 使用 width 和 height 媒体查询创建响应式布局。

• <meta viewport="">，以及如何使用它使 Web 文档在移动设备上正确显示。

  • 为了可访问性，切勿设置 user-scalable=no。

资源

• 构建响应式网站：模块介绍, Scrimba 课程合作伙伴

• 响应式设计

• 媒体查询入门指南