Css 为什么 height:0 不隐藏我的填充 ,即使使用 boxsizing:borderbox
我有一张带衬垫的<div>
.我已将其设置为height: 0
,并将其设置为overflow: hidden
和box-sizing: border-box
.
HTML
<div>Hello!</div>
CSS
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>
人消失.
然而,它仍然可见(在我的Mac上的Chrome 31和Firefox 25中).height
声明似乎并不适用于填充,尽管有box-sizing
声明.
这是预期的行为吗?如果是,为什么?The MDN page on box-sizing
似乎没有提到这个问题.
据我所知,the spec也没有-在我看来,当设置了box-sizing: border-box
(或者实际上是padding-box
)时,宽度和高度都应该包括填充.
我有一张带衬垫的<div>
.我已将其设置为height: 0
,并将其设置为overflow: hidden
和box-sizing: border-box
.
HTML
<div>Hello!</div>
CSS
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>
人消失.
然而,它仍然可见(在我的Mac上的Chrome 31和Firefox 25中).height
声明似乎并不适用于填充,尽管有box-sizing
声明.
这是预期的行为吗?如果是,为什么?The MDN page on box-sizing
似乎没有提到这个问题.
据我所知,the spec也没有-在我看来,当设置了box-sizing: border-box
(或者实际上是padding-box
)时,宽度和高度都应该包括填充.
推荐答案
border-box
的确切定义是:
也就是说,元素上指定的任何填充或边框都会在此指定的宽度和高度内进行布局和绘制.内容宽度和高度的计算方法是从指定的"width"和"Height"属性中减go 相应边的边框宽度和填充宽度.
因此可以修改高度和宽度属性,但padding
和border
永远不会更改.
由于内容宽度和高度不能为负值([CSS21],第10.2节),因此该计算的下限为0.
然后,如果height
是0,你不能让填充物在里面,因为这意味着高度是负的.