前端码农

Appearance

盒模型 ​

导航目录 ​

基本概念 ​

在 CSS 中，一个元素的“盒子”由内到外通常包含：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。

  • padding / border 会影响元素“盒子本体”的尺寸
  • margin 不属于盒子本体，它是与其他元素/容器之间的间距，会影响布局占位，但不改变盒子本体的边框大小

尺寸计算（content-box vs border-box） ​

box-sizing 决定 width/height 指的是哪一层的尺寸：

  • content-box（默认）：width/height 只包含 content
    • 元素的边框盒（border-box）总宽度：
      • (content + padding-left + padding-right + border-left + border-right)
  • border-box：width/height 包含 content + padding + border
    • 你设置 width: 100px，最终边框盒宽度就是 100px

TIP

快速记忆：

  • 默认 content-box：设置的宽高是“内容区”
  • border-box：设置的宽高是“边框区”（更符合直觉，也更常用）

示例：同一组 padding/border，在两种 box-sizing 下的结果 ​

下面示例中，width 都是 100px，但两种 box-sizing 的最终 border-box 宽度不同。

html
<style>
  .box {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    background: #f7f7f7;
  }
  .contentBox {
    box-sizing: content-box; /* 默认值，可不写 */
  }
  .borderBox {
    box-sizing: border-box;
  }
</style>

<div class="box contentBox">content-box</div>
<div class="box borderBox">border-box</div>

计算结果：

  • content-box（默认）
    • width: 100px = content 宽度
    • border-box 总宽度：(100 + 10 + 10 + 1 + 1 = 122px) → 122px
  • border-box
    • width: 100px = border-box 宽度
    • border-box 总宽度：100px

TIP

注意：margin: 10px 不参与上面的“盒子本体宽度”计算，但会产生 10px 外边距间隔，从而影响布局效果。

盒模型 ​

盒模型计算 ​

  • box=边框+内边距离+content
  • box-sizing: border-box 让盒子宽高等于设置的

TIP

如下设置了 box-sizing: border-box; box=100px
如果未设置 box=100+10+10+2=122px

html
<style type="text/css">
  #box {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    box-sizing: border-box;
  }
</style>
<div id="box">this is div1</div>