CSS3ボックスのサイズ
CSS3 ボックス サイズ
CSS3 のボックス サイズ プロパティには、padding (パディング) と border (ボーダー) が含まれます。
CSS3 のボックス サイズ設定プロパティを使用しないでください
デフォルトでは、要素の幅と高さは次のように計算されます:
width (幅) + パディング (パディング) + ボーダー (境界線) = 実際要素の幅
高さ (高さ) + パディング (内側のマージン) + ボーダー (境界線) = 要素の実際の高さ
これは、要素の幅/高さを設定すると、実際に表示される要素の高さと幅が同じになることを意味します。より大きくなります(要素のボーダーとパディングも幅/高さで計算されるため)。
上の図の 2 つの <div> 要素の幅と高さの設定は同じですが、div2 でパディングが指定されているため、実際に表示されるサイズは一致しません。試してみてください
この方法を使用して、より小さいボックスを取得し、パディングを含めたい場合は、境界線とパディングの幅を考慮する必要があります。
CSS3 のボックス サイズ設定プロパティは、この問題を非常にうまく解決します。
CSS3のボックスサイズ設定プロパティを使用する
CSS3のボックスサイズ設定プロパティには、要素の幅と高さのパディング(padding)とボーダー(border)が含まれます。
要素に box-sizing: border-box; が設定されている場合、padding (パディング) と border (ボーダー) も幅と高さに含まれます:
例
以下は 2 つです< 簡単な例box-sizing: border-box 属性を ;div> 要素に追加します。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>実行して試してみてください box-sizing: border-box; 効果が向上し、まさに多くの開発者が必要としているものです。 次のコードは、より直感的な方法ですべての要素のサイズを表示できます。多くのブラウザーはすでに box-sizing: border-box; をサポートしています (ただし、すべてではありません。そのため、width: 100%; の input 要素と text 要素の幅が異なります)。 すべての要素にボックス サイズを使用することをお勧めします: 実行して試してください<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>
