Web ページをレイアウトするときに、最終的な Web ページの幅または高さが事前計算を超える状況がよく発生します。これは、実際には、いわゆる CSS ボックス モデルが原因です。
| #test{マージン:10px;パディング:10px;幅:100px;高さ:100px;} |
上記のコードのように、多くの場合、幅: 120px、高さ: 120px として占める位置を計算します。これは、通常の理解では、パディングは幅に含まれるべき内側のマージンであり、マージンは外側の端であるためです。距離なので、width=margin-left + margin-right + width ですが、CSS ボックス モデルのブラウザーの解釈は同じではないため、最終的には、レイアウトされた Web ページの幅と高さが、私たちの設定を超えることがわかります。予想どおりの計算が行われず、最終的には表示のずれが発生します。
実際には、そうではありません。テストが占める位置の実際の計算は、width=margin-left + margin-right + padding-left + padding-right + width である必要があります。つまり、実際の幅のサイズは次のようになります。 +幅自体、つまりテストの実際のサイズは140pxである必要があります。高さの計算は幅の計算と同じです。
また、テストに境界線が追加された場合、幅と高さのアルゴリズムによって境界線のサイズも追加される必要があります。
| #test{マージン:10px;パディング:10px;ボーダー:5px;幅:100px;高さ:100px;} |
ここでのテストの幅は、外側の境界線 + 内側の境界線 + 境界線 + 幅そのものである必要があるため、テストの幅は 150px になります。
下図に示すように、幅と高さが実際に占める位置は小領域そのものではなく、一番外側の濃い青色のレイヤーまであるはずです。
