android - 设置填充是否会更改 Android 或 IOS 上的 View 大小？

Question

我正在研究填充的工作原理并在 Android、IOS 和 Web 之间进行比较。

在这种情况下。在每个平台上，我应该为 Item 设置多少宽度？

如果您在您熟悉的平台(Web/Android/IOS)上留下答案将会很有帮助。

Answer 1

在网络上:

这取决于您应用填充的元素的 box-sizing 属性。该属性实际上可以具有值 content-box 或 border-box(也可以具有 initial 和 inherit 但最后将再次应用前两个)。使用 content-box 时，实际大小会通过填充和边框增加，而使用 border-box 则不会:

.box {
  width: 300px;
  height: 50px;
  margin: 10px auto;
  background-color: #eee;
  padding: 20px;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

<div class="box content-box"> Content Box </div>
<div class="box border-box"> Border Box </div>

当使用content-box时，渲染元素的实际宽度将是width、padding和border的总和 属性值。使用 border-box 它将等于 width 属性。在这种情况下，填充和边框在视觉上停留在定义的 width 边界的“内部”。您可以在此处阅读有关差异的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

结论:

您可以使用 content-box 和 335px 宽度，或者使用 border-box 和 375px 宽度你的例子。两者都是可能的，尽管 border-box 在我看来更直观并且有助于防止错误。