Question

我有两列，一列是60％，一列是40％。两者都需要20px填充。在不使用box-sizing属性的情况下计算此值的最佳方法是什么？我是用％还是ems做的？

盒子大小属性是一种在这里使用的好方法吗？

Answer 1

你可以像这样使用calc函数：

width: calc(100% - 80px);

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

要回答原始问题，除非必须出于某种原因需要20像素，否则请使用填充和边距的百分比，并从宽度中减去它。我将使用ems作为顶部/底部填充和边距，因为这就是我做的IRL。

.myclass_1 {
     width: 56%;
     margin: 1em 1%;
     padding: .5em 1%;
     display: inline-block;
}
.myclass_2 {
     width: 38%;
     margin: 1em auto;
     padding: .5em 1%;
     display: inline-block;
}

开发边框的问题是边框不会占用宽度的百分比，这使得无法将像素完美的边框放入流畅的布局中。填充更方便，因为你不需要做很多数学运算，但至少它是有效的;而对于边界，除了近似之外没有解决方案。

我所做的是为了适应边框宽度，以及您可能希望尝试作为旧版浏览器的后备广告，是在包含框上设置最小宽度，然后将宽度减少一半以允许边框宽度。然后只需在屏幕上播放它，直到它填满最小尺寸的窗口而不会破坏设计。

毋庸置疑，如果你的填充必须是20px，但你想要一个流畅的显示，这对于不支持更新盒子大小的浏览器来说是一个优雅的降级，这也会有效。

顺便说一句，如果你没有边框，有一个“box-sizing：padding-box”风格，虽然我不确定它是否比border-box有任何优势。我和你在calc（）上 - 即使在支持的情况下它仍然太麻烦了。

css3填充，百分比和盒子大小

2 个答案: