CSS3の境界線のサイズ
ボックス サイズ属性
を使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
デフォルト値: content-box
JavaScript 構文: object.style.boxSizing="border-box"
構文
box-sizing: content-box|border-box|inherit;
content-box : 幅と高さは要素のコンテンツ ボックスに個別に適用されます。要素のパディングと境界線を幅と高さの外側に描画します。
border-box: 要素に設定された幅と高さによって、要素の境界ボックスが決まります。つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。
inherit: box-sizing 属性の値を親要素から継承する必要があることを指定します。
要素に box-sizing: border-box; が設定されている場合、padding (パディング) と border (border) も幅と高さに含まれます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网</div>
</body>
</html>CSS3 の box-sizing 属性を使用しないでください
デフォルトでは、要素の幅と上限は次のように計算されます:
width (幅) + padding (パディング) + border (ボーダー) = 要素の実際の幅
height (高さ) + パディング(内側のマージン) + 境界線 (境界線) = 要素の実際の高さ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
