html - 试图理解 CSS 和 Box-sizing : Border-box property

Question

我今天在上响应式网页设计类(class)时发现了一种新样式，然后我查看了 w3schools 示例，我有点困惑。

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

但是，如果我随后应用边框框，它与边框保持在 200 x 200，实际内容框现在在技术上是 198px x 198px。

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

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

Answer 1

当您应用 box-sizing: border-box; 并设置特定宽度时，该宽度是您的 div 的最大宽度，包括边框、填充(填充是您在 .div4), 等等

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