css3 填充、百分比和盒子大小答案

【问题标题】：css3 padding, percentages and box-sizingcss3 填充、百分比和盒子大小
【发布时间】：2015-01-04 05:13:50
【问题描述】：

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

box-sizing 属性在这里使用是不是一个好方法？

【问题讨论】：

向我们提供您的 HTML 和 CSS 的小提琴代码。
这是box-sizing: border-box 的完美用例。对于旧版本的 IE，您可以使用 this polyfill。另外，请记住为 Firefox 和旧版本的 Safari 添加 -moz- 和 -webkit- 前缀。
我以为老版本的 ie 还是用了这个盒子模型？
@welovedesign 仅在 quirksmode 中，所以我认为 IE 6 和 7 会是一个问题，但它们现在基本上已经死了。

【解决方案1】：

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

width: calc(100% - 80px);

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

【讨论】：

好主意，会使用它，但支持不如我想的那么好。我认为 box-sizing 是一种方式

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

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

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

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

【讨论】：