我正在研究填充的工作原理并在 Android、IOS 和 Web 之间进行比较。
在这种情况下。在每个平台上,我应该为 Item 设置多少宽度?
如果您在您熟悉的平台(Web/Android/IOS)上留下答案将会很有帮助。
最佳答案
在网络上:
这取决于您应用填充的元素的 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
在我看来更直观并且有助于防止错误。
关于android - 设置填充是否会更改 Android 或 IOS 上的 View 大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58813579/