第 9 课 17 / 25 | 编码:L09-26
现场回答 · 单选

最小宽度与内容区

提问:父容器足够宽,没有滚动条。下面通知框的内容区宽度是多少?

<style>
  .notice {
    box-sizing: border-box;
    width: 240px;
    min-width: 260px;
    max-width: 280px;
    padding: 16px;
    border: 4px solid teal;
  }
</style>
<div class="notice">分享会通知</div>

选择一项,并说明依据

A. 200px

B. 220px

C. 240px

D. 260px

查看参考解析

答案:B。width: 240px 受到 min-width: 260px 限制,最终边框盒宽度为 260px;max-width: 280px 不会把它直接扩大到 280px。

内容区宽度为 260 − 16 × 2 − 4 × 2 = 220px。

A 忽略了最小宽度;C 直接使用声明的 width;D 把最终边框盒宽度当成了内容区宽度。