试图理解CSS＆amp;盒子大小：边框属性

Question

今天我在响应式网页设计课上找到了一种新的风格，然后我查看了w3schools的例子，我有点困惑。

如果我创建一个200px到200px的div并在其周围应用1px边框，理论上该元素总共会变为202px到202px。

但是如果我然后应用border-box，它的边框保持在200乘200，实际内容框现在技术上是198px到198px。

只是想确保实际发生的事情。

使用the example from w3schools，您可以看到.div4的内容似乎没有正确对齐，但为什么会这样？

Answer 1

当您应用box-sizing: border-box;并设置特定宽度时，该宽度是div的最大宽度，包括边框，填充（填充是您在.div4中看到的）等等。

非常适合响应式设计，因为它可以帮助您计算宽度以适应您的设计。