ホームページ > 記事 > ウェブフロントエンド > ボックスサイジングプロパティとは何ですか
ボックスサイジングプロパティとは何ですか
- 爱喝马黛茶的安东尼オリジナル
- 2019-07-22 09:39:5715568ブラウズ
box-sizing 属性の定義と使用法
box-sizing 属性は css3 の新しい属性です。指定した領域内に収まるように特定の要素を定義します (たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing プロパティを "border-box" に設定することで配置できます。これにより、指定された幅と高さのボックスがあり、境界線とパディングがそのボックスに配置されます);
Internet Explorer、Opera、Chrome ブラウザーは box-sizing 属性をサポートしています。Firefox はサポートしていません。 -moz-box-sizing 属性は box-sizing 属性を置き換えます;
box-sizing 属性の構文形式
box-sizing: content-box/border-box/inherit;
関連情報: "CSS_CSS3 Knowledge >>
パラメータの説明
content-box: これは、CSS2.1で指定された幅と高さの動作です。要素のコンテンツ ボックスにそれぞれ適用されます。幅には、高さと高さに加えて要素のパディングと境界線も描画します。
border-box: 要素に設定された幅と高さによって、要素のコンテンツ ボックスが決まります。要素の境界ボックス、つまり要素の境界線に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、設定された幅と高さからそれぞれボーダーとパディングを減算することで取得できます。
inherit: box-sizing 属性の値が親要素から継承されるように指定します。
例:
<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>css3 box-sizing属性笔记</title><style type="text/css">
body{background-color: #aaa;}div.container{width:30em;border:1em solid;}
.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;border:1em solid red;float:left;}
</style></head><body><div class="container">
<div class="box">这个 div占据左半部分。</div><div class="box">这个 div占据右半部分。</div>
</div></body></html>実行結果:
以上がボックスサイジングプロパティとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。