17

CSSで使用box-sizing: border-boxする場合、要素の合計幅はその「幅」の値で定義されると想定しています。したがって、分割の幅が20ピクセルで、右の境界線が10ピクセルであるとすると、20ピクセルのスペースを占めるボックスになり、その半分が右の境界線になります。ここのように、幅を10pxに設定し、右の境界線も設定するポイントまでプッシュします。

#box {
  overflow: hidden;
  width: 10px;
  box-sizing: border-box;
  height: 50px;
  background: black;
  border-right: 10px solid red;
}
<div id="box"></div>

ボックスは赤い境界線のみで構成されます。幅を0pxに設定するとどうなりますか？全体が消えると思っていましたが、結果は上記とまったく同じです。

#box-1 {
  overflow: hidden;
  width: 10px;
  box-sizing: border-box;
  height: 50px;
  margin-bottom: 10px;
  background: black;
  border-right: 10px solid red;
}

#box-2 {
  overflow: hidden;
  width: 0px;
  box-sizing: border-box;
  height: 50px;
  background: black;
  border-right: 10px solid red;
}
<div id="box-1"></div>
<div id="box-2"></div>

jsFiddleで表示

私の質問は、これが期待される動作であるかどうかです。私には矛盾しているようです。幅/高さだけを操作してボックスを消したいのですが。

4

2 に答える 2

18

コンテンツ領域は、境界線の幅を差し引いた後に残ったものです。

コンテンツの幅と高さは、指定された「width」プロパティと「height」プロパティからそれぞれの辺の境界線とパディングの幅を差し引くことによって計算されます。

指定された幅=10ピクセル
の境界線の幅=10ピクセル
コンテンツの幅=指定された幅（10ピクセル）-境界線の幅（10ピクセル）
コンテンツの幅10-10 = 0

指定された幅=0px
境界線幅=10px
コンテンツ幅=指定された幅（0 px）-境界線幅（10 px）
コンテンツ幅0-10 = -10（境界線で使用されていた10 pxを削除します）

だが

コンテンツの幅と高さを負にすることはできないため（[CSS21]、セクション10.2）、この計算は0になります。

指定された幅=0px
境界線幅=10px
コンテンツ幅=指定された幅（0 px）-境界線幅（10 px）
コンテンツ幅0-10 = 0（境界線で使用されている10 pxは削除されません）

display:none;またはを使用したくない場合は、との両方をゼロvisibility:hidden;に設定する必要があります。width:XX;border-right:XX;

于 2012-06-21T16:52:45.843 に答える
1

このスクリーンショットを見てください。

ボックス メトリック

ボックス全体100x100pxはご想像のとおりですが、実際の幅は90px+10px右ボーダーです。したがって、幅を 0 に設定すると、幅は 0 のままですが (負の幅を指定することはできません)、境界線は 10px のままです。

于 2012-06-21T16:16:54.450 に答える