css - css3 填充、百分比和盒子大小

Question

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

box-sizing 属性是在这里使用的好方法吗？

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;
}

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

我为适应边框宽度所做的，以及您可能想尝试作为旧版浏览器的后备方法，是在包含框上设置最小宽度，然后将宽度削减 0.5% 以允许边框宽度。然后在你的屏幕上玩它，直到它填满最小尺寸的窗口而不破坏设计。

不用说，如果您的内边距必须为 20 像素但您想要流畅的显示，这也将起作用，作为不支持新框大小的浏览器的优雅降级。

顺便说一句，如果您没有边框，则有“box-sizing: padding-box”样式，尽管我不确定它是否比边框框有任何优势。我在 calc() 上支持你——即使在支持的情况下，它仍然太麻烦了。