css - 使用边框框；有填充？

Question

我问的原因是因为 padding: 25px;添加了它。

在这里添加 box-sizing 是否是个好主意？

盒子尺寸已删除

https://jsfiddle.net/wby16ep8/1/

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

添加了盒子大小

25 x 2 = 50 + 4 = 54 + 936 = 990

https://jsfiddle.net/wby16ep8/5/

.container {
  width: 990px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  background: #000000;
  border: 2px solid #0059dd;
  box-sizing: border-box;
}

Answer 1

如果您的其余代码使用box-sizing: border-box;，请在此处也使用它。

其他注意事项

如果你想支持响应式设计，是的。

另外，使用以下代码：

.container {
  max-width: 990px; /* Change */
  width: 100%; /* Change */
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  background: #000000;
  border: 2px solid #0059dd;
  box-sizing: border-box;
}

如果您不想支持响应式设计，那么使用box-sizing只是一种偏好。您是否希望包含宽度？