CSS を使用して Div の境界線を一貫させるにはどうすればよいですか?

一貫した Div 境界線の実現

境界線を使用して div 要素をスタイル設定する場合、標準の CSS アプローチ (例: "border: 1px 単色黒") ) は、div のサイズに境界線の太さを追加します。たとえば、1 ピクセルの境界線では、意図した 100 ピクセル x 100 ピクセルではなく、102 ピクセル x 102 ピクセルの div が生成されます。

「box-sizing」プロパティを利用する

この問題を修正するために、CSS では「box-sizing」プロパティが導入されました。このプロパティを「border-box」に設定すると、ブラウザは境界線の幅を div の寸法の一部として扱います。

コードでの実装

次のコードを考えてみましょう。 :

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

「box-sizing: border-box」を指定することで、div が計測されるようになりました100 ピクセル x 100 ピクセル。その寸法内に 20 ピクセルの境界線が含まれます。

以上がCSS を使用して Div の境界線を一貫させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。