第 9 课 24 / 25 ｜ 编码：L09-29
学习通 · 课后阅读

盒模型与行内元素尺寸

阅读 MDN《盒模型》（新标签页），结合下列代码回答。
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model 

.badge {
  width: 200px;
  height: 60px;
  border: 2px solid teal;
}
.b { display: inline-block; }
<span class="badge">唱腔赏析</span>
<span class="badge b">服饰介绍</span>

三个问题

  1. 两个 span 的内容区都会是 200 × 60px 吗？说明原因。
  2. inline-block 必须独占一行吗？容器变窄导致换行，是否意味着它变成了 block？
  3. 第二个元素改用 border-box 后，200px 包含哪些区域？内容区宽度又是多少？

在学习通提交结论及文档依据。