SOURCE

<div class="container">
  <p>关于 border-box 和 content-box 的区别，在这个例子中表现的非常明显，两个 div 设置了同样的 width 和 padding 值属性，表现了不同的实际宽度</p>
  <div class="box border-box">border-box</div>
  <div class="box content-box">content-box</div>
</div>

.container {
  background: #eee;
  width: 200px;
  .box {
    padding: 0 10px;
    background: blue;
    color: #fff;
    width: 200px;
    height: 100px;
    &.border-box {
      box-sizing: border-box;
    }
    &.content-box {
      color: #000;
      background: yellow;
    }
  }
}