4

このコードを検討してください

div {
  box-sizing: border-box;
  
  width: 0;
  height: 0;    
  max-width: 0;
  max-height: 0;
  
  border: 1px solid gray;
  padding: 12px;
  overflow: hidden;
}
<div>Hi</div>

幅と高さがゼロで、パディング/ボーダーが幅と高さゼロの内側にあるため、これまでに読んで理解し、使用したすべてのものによると、これは何も表示されません。box-sizing: border-box;

ただし、表示されるのは 26x26 ボックス ((12 パディング + 1 ボーダー)*2) です。何を与える？なぜborder-boxここで働いていないのですか？

4

1 に答える 1

5

スペックによると、

コンテンツの幅と高さは、指定された幅 と高さのプロパティからそれぞれの辺のボーダーとパディングの幅を差し引いて計算されます。コンテンツの幅と高さを負にすることはできないため([CSS21]、セクション 10.2)、この計算は 0 に制限されます。

したがって、要素の高さと幅は事実上 0 です。ただし、パディングと境界線のために大きく表示されます。

于 2015-03-06T22:00:47.070 に答える