试图理解 CSS & Box-sizing : Border-box 属性答案

【问题标题】：Trying to understand CSS & Box-sizing : Border-box property试图理解 CSS & Box-sizing : Border-box 属性
【发布时间】：2015-07-19 20:02:34
【问题描述】：

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

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

但如果我随后应用边框框，它的边框仍为 200 x 200，实际内容框现在在技术上是 198 像素 x 198 像素。

只是想确定实际发生的情况。

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

【问题讨论】：

标签： html css responsive-design padding

【解决方案1】：

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

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

【讨论】：

我认为添加 padding: 50px 会将其添加到元素的所有四个部分 - 顶部、底部、左侧和右侧。也许这就是我当时真正的问题
padding:50px 确实为所有 4 个边添加填充。即使在 w3schools 示例中也是如此。虽然高度固定在 100px，所以你看不到那里的底部填充。您需要添加更长的文本才能看到右侧的填充。
@MichalMcCaskle 你给了 div 100px 的固定高度，并且 50px + 50px + 文本高度 > 100px。移除固定高度，您将看到 div 拉伸以适应 50px 填充。或者添加更多内容，您会看到它溢出 div。