ボックスサイジングプロパティとは何ですか-CSSチュートリアル-php.cn

ボックスサイジングプロパティとは何ですか

爱喝马黛茶的安东尼

リリース： 2019-07-22 09:39:57

オリジナル

15583 人が閲覧しました

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>

ログイン後にコピー

実行結果:

ボックスサイジングプロパティとは何ですか