css - 在 % width div 中固定 px 填充

Question

填充 CSS 样式向 DIV 的一侧或多侧添加一些填充。但是，它会增加总宽度/高度，而不是占用现有空间。

我的问题是我有一个具有 % 宽度的 DIV，但它需要以 px 为单位测量的填充。总宽度必须保持在一个非常具体的百分比，没有灵 active 的余地。

如果内边距和宽度都需要是 % 或 PX，那不是问题，因为您需要做的就是从宽度中减去总内边距。

在这种情况下我该怎么办？

(请注意，我不能只计算填充 PX 的百分比，因为该页面采用响应式设计，具有 5 种不同的屏幕尺寸，对于其中一些，DIV 可以随着浏览器在相同宽度范围内调整大小时缩小)

Answer 1

box-sizing CSS 属性应该可以满足您的需求。它需要供应商前缀才能在所有浏览器中工作。默认值为 content-box，它通过添加预定义的 dims 和任何偏移量(即填充)来计算整体盒模型尺寸，但如果您使用 border-box 它应该允许您定义的尺寸接管。此代码会将 border-box 样式应用于您的整个 DOM，您可能更喜欢它:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

这里有一篇很棒的文章:http://www.paulirish.com/2012/box-sizing-border-box-ftw/