0Pricing
CSS Academy · 课时

使用百分比实现流式宽度

使用基于百分比的宽度，创建能够随容器缩放的布局。

使用百分比实现流式宽度 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为何使用流式宽度

固定宽度布局（以像素为单位）在屏幕宽度小于固定尺寸时会出现问题。使用百分比的流式宽度可以让布局根据任意容器或视口尺寸按比例缩放。

百分比宽度基础

百分比宽度相对于父容器的宽度计算。设置 width: 50% 的子元素，其宽度始终是父容器宽度的一半。

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

百分比与盒模型尺寸

使用 box-sizing: border-box 时，百分比宽度包含内边距和边框。这样可以轻松设置百分比列——无论内边距是多少，50% 都确实表示一半。

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

流式双列布局

一种基于浮动的简单流式布局（旧式方法）：

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

流式弹性盒列

使用弹性盒布局实现流式列布局更加简洁：

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

百分比内边距

百分比内边距始终相对于父元素的宽度（而不是高度）计算，即使是上方和下方的内边距也是如此。借此可以实现宽高比技巧：

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

现代宽高比

aspect-ratio 属性取代了使用内边距的技巧，用于保持宽高比：

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

流式布局中的 max-width

将百分比宽度与 max-width 结合，可以防止内容行在大屏幕上变得过宽：

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

百分比高度的陷阱

百分比高度要求父元素具有明确的高度。如果父元素设置了 height: auto，子元素的百分比高度也会计算为 auto。

固有尺寸关键字

现代 CSS 还提供了更灵活的尺寸选项：

  • min-content：适合内容的最小尺寸
  • max-content：在一行中容纳全部内容的尺寸
  • fit-content：介于最小内容尺寸和最大内容尺寸之间
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

流式网格模式

使用 inline-block（传统方式）或现代 CSS 实现的常见流式网格：

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

快速检查

父元素的宽度为 600px。子元素设置了 width: 60% 和 padding: 20px（box-sizing: border-box）。子元素的内容宽度是多少？

回顾

百分比宽度可以创建随父容器缩放的流式布局。结合 max-width 可以防止内容过宽。使用 aspect-ratio 实现响应式媒体。与百分比浮动相比，Flexbox 和 Grid 可以更优雅地处理流式列布局。

常见问题解答

「使用百分比实现流式宽度」课时是免费的吗？

是的 — 「使用百分比实现流式宽度」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用百分比实现流式宽度」这节课中我会学到什么？

使用基于百分比的宽度，创建能够随容器缩放的布局。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用百分比实现流式宽度」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 移动优先与桌面优先方法
  2. 使用百分比实现流式宽度
  3. 最小宽度与最大宽度模式
  4. 响应式图像与 Picture 元素
← 返回 CSS Academy