`box-sizing: border-box` はボーダー付きの HTML 要素のサイズにどのように影響しますか?

境界線の内側と外側

境界線を使用して HTML 要素のスタイルを設定する場合、境界線が要素に対してどこに配置されるかを考慮することが重要です。要素の寸法。デフォルトでは、CSS 境界線は要素の外側に配置され、両側に幅が追加されます。

Box-Sizing による Div サイズの維持

div の寸法が変更されないようにするには境界線が追加されると、ボックスのサイズ設定プロパティが機能します。 border-box に設定すると、要素の指定された幅と高さの範囲内に境界線が含まれます。

CSS の実装

これは、box の効果を示す CSS の例です。 sizing:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

この例では、div の境界線は 20px です。 box-sizing: border-box を使用しない場合、div の合計幅は 140 ピクセルになります (コンテンツが 100 ピクセル、両側の境界線が 20 ピクセル)。ただし、box-sizing: border-box を使用すると、境界線は指定された幅 100 ピクセル内に含まれ、div の実際の幅は 100 ピクセルのままになります。

以上が`box-sizing: border-box` はボーダー付きの HTML 要素のサイズにどのように影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。