box-sizing 属性は CSS3 で導入されたもので、width 属性と height 属性で指定した幅と高さの値に、要素内の幅と高さだけでなく、要素内のパディング領域を含めるかどうかを指定できると説明する人もいます。国境。この文はちょっとわかりにくいですが、コンテナの高さと幅の計算方法ですが、具体的にはどのような計算方法なのでしょうか？例。 。
例：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>ボックスのサイズ設定</title><styletype=text/css>div{width:50px;height:50px;margin:10px;padding: 10px;border:10pxsolid#888;}#bs{box-sizing:border-box;}</style></head><body><div></div><divid=bs></div></本文></html>実行結果:
上の図からわかるように、2 つのサイズの違いはブラウザを使用して 2 つの計算方法を確認することができます。
上の図は従来の計算方法で、上の最初の div のサイズです。
div の実際の幅は 50+10*2+10*2=90px であることがわかります。 div に指定する高さと幅は、図 1-1 の最も内側の領域であるコンテンツ領域の高さと幅を参照するためです。
上の図の 2 番目の div の実際の計算サイズは、10+10*2+10*2=50px であることがわかります。最後に、コンテナの高さと幅は、単にコンテンツ領域のサイズを指すのではなく、実際のコンテナの高さと幅です。このときの高さと幅の計算方法には、パディングやボーダーサイズも含まれることがわかります。
box-sizing 属性のオプションの値は次のとおりです。
[例] 以下は例を使用して、box-sizing 属性の使用方法を示しています。
<!DOCTYPEhtml><html><head><style>div{width:300px;height:50px;margin-top:5px;border:10pxsolidred;padding:5px;}.two{box-sizing:content-box;} .three{box-sizing:border-box;}</style></head><body><divclass=one>デフォルト </div><divclass=two>コンテンツボックス</div><divclass=three >ボーダーボックス</div></body></html>実行結果:
