ホームページ > ウェブフロントエンド > CSSチュートリアル > `box-sizing: border-box` はボーダー付きの HTML 要素のサイズにどのように影響しますか?

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

Linda Hamilton
リリース: 2024-12-15 02:05:19
オリジナル
647 人が閲覧しました

How Does `box-sizing: border-box` Affect the Size of an HTML Element with a Border?

境界線の内側と外側

境界線を使用して 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート