尝试理解CSS & Box-sizing :边框属性

Question

我今天在上响应式网页设计的课程时发现了一种新的风格，然后我查看了w3schools example，我有点困惑。

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

但是如果我随后应用边框，它仍然是200 * 200的边框，而实际的内容框现在技术上是198px * 198px。

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

使用the example from w3schools，您可以看到.div4的内容似乎不能正确地对齐，这是为什么呢？

Answer 1

当你应用box-sizing: border-box;并设置一个特定的宽度时，这个宽度就是你的div的最大宽度，包括边框、填充(填充就是你在.div4中看到的填充)等等。

​

​

这对于响应式设计非常有用，因为它可以帮助您计算宽度以适应您设计。