在%width div中修复了px填充

时间:2014-01-14 17:58:21

标签: css responsive-design padding

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

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

如果填充和宽度都需要为%或PX,则不会出现问题,因为您需要做的就是从宽度中减去总填充量。

在这种情况下我该怎么做?

(请注意,我无法计算填充PX的百分比,因为页面具有5种不同屏幕尺寸的响应式设计,对于其中一些,当浏览器在相同宽度范围内调整大小时,DIV会缩小)

1 个答案:

答案 0 :(得分:0)

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/