border-box和content-box哪种计算方式更符合现代化网页设计？

我觉得当前这个问题挺有意思的，这是因为它涉及到网页设计的根本问题。总体来说就这一些， 好吧... 差别关键在于“width到底包不包含padding和border”。

你有可能会想，这有哪些较大不了的？但实际情况是这是一个很关键的问题。这是因为不同的计算方式会作用于到你的布局，特别是在响应式设计中。

content-box：传统方式却简单出问题的计算方式

哈基米！ content-box是CSS盒模型的默认计算方式。在这种模式下元素的width和height只包含内容区域，不包括padding和border。这意味着， 如果你设置一个元素的width为200px，然后再加一些padding和border，它的实际较宽度就会较高于200px。

举个例子：

  .example {
    width: 200px;
    padding: 20px;
    border: 10px solid #000;
  }

精辟。 那么它实际占用的总较宽度是：200px+ 2*20px+ 2*10px= 260px。

哭笑不得。 这简单引起布局超出预期尺寸，尤其在响应式设计中简单出问题。这是因为你需要不断地计算和调整元素的较大较小，以确保它们不会超出容器的较宽度。

border-box：更直观、 更较高效的计算方式

对比来看，border-box就聪慧更多了。在这种模式下元素的width和height包含了内容、padding和border。这意味着， 如果你设置一个元素的width为200px，那么它的实际较宽度就是200px，不管你加更多更少个padding或border。

同样设置：

  .example {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid #000;
  }

此时总较宽度仍然是200px，浏览器会自动压缩内容区域来适应环境：内容较宽度 = 200px - 2*20px - 2*10px = 140px。

说实话... 这种方式更符合视觉上的“当前这个盒子就是200px较宽”的直觉。因此也，采用border-box能降较低计算负担，提升开发效率。

现代化网页设计更倾向于border-box

较大更多数现代化项目推荐全局设置：

  * {
    box-sizing: border-box;
  }

这样全部元素都采用border-box模型， 避免意外的较宽度溢出， 我给跪了。 让布局更可控，尤其是在在采用百分比较宽度或弹性布局时。

当然 也有人觉得content-box在部分特定场景下更有用，比如当你需要精准控制内容区域的较大较小时。 太离谱了。 但总体border-box更符合现代化网页设计的需求。

结论

content-box和border-box是CSS盒模型的两种计算方式,最主要差别在于较宽度和较高度的计算方式不同。明白它们的差别对布局控制非常十分沉关键。在CSS中， border-box 和 content-box 是box-sizing属性的两个最主要值， 太暖了。 它们决定了元素的较宽度和较高度怎样计算。方式，你能够更良好地控制你的布局，提升开发效率，降较低不必不可更少的麻烦。嗯，就酱。反正我是这么觉得的~！啊，你看懂了吗？看不懂也没关系，反正我写了良好更多字……..。扯远了总之呢，就是这样。