Question

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

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

如果填充和宽度都需要为％或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/

在％width div中修复了px填充

1 个答案: