我有一个<div>带衬垫。我已将其设置为height: 0,并给出它overflow: hidden and box-sizing: border-box.
<div>
height: 0
overflow: hidden
box-sizing: border-box
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 0; overflow: hidden; padding: 40px; background: red; color: white; }
<div>Hello!</div>
据我了解,这应该使<div>消失。
但是,它仍然可见(在我的 Mac 上的 Chrome 31 和 Firefox 25 中)。这height尽管声明似乎不适用于填充box-sizing宣言。
height
box-sizing
这是预期的行为吗?如果是这样,为什么?MDN 页面上box-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing好像没有提到这个问题。
据我所知,也不the spec http://www.w3.org/TR/css3-ui/#box-sizing0- 它对我来说就像宽度和高度都应该包括填充box-sizing: border-box(或者确实padding-box) 已设定。
padding-box
的确切定义border-box is:
border-box
也就是说,元素上指定的任何填充或边框都会在此指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“width”和“height”属性中减去相应边的边框和内边距宽度来计算的。
所以你可以修改高度和宽度属性,但是padding and border从不改变。
padding
border
由于内容的宽度和高度不能为负([CSS21],第 10.2 节),因此该计算的底限为 0。
那么,如果height为 0 时,不能将内边距设置在内部,因为这意味着高度将为负数。