在 % width div 中固定 px 填充

【问题标题】：fixed px padding in % width div在 % width div 中固定 px 填充
【发布时间】：2014-01-15 02:00:31
【问题描述】：

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

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

如果内边距和宽度都需要为 % 或 PX，这不会有问题，因为您只需从宽度中减去总内边距。

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

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

【问题讨论】：

标签： css responsive-design padding

【解决方案1】：

box-sizing CSS 属性应该可以满足您的需求。它需要供应商前缀才能在所有浏览器中工作。默认值为content-box，它通过添加预定义的暗淡和任何偏移量（即填充）来计算整体盒子模型尺寸，但如果您使用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/

【讨论】：