CSS3ボックスのサイズ
CSS3 ボックス サイズ
CSS3 ボックス サイズ プロパティは、padding (パディング) と border (ボーダー) を含む幅と高さのプロパティを設定できます。
CSS3 のボックス サイズ プロパティを使用しません
デフォルトでは、要素の幅と高さは次のように計算されます:
width (幅) + パディング (パディング) + ボーダー (境界線) = 要素の実際の幅要素
高さ + パディング + ボーダー = 要素の実際の高さ
これは、要素の幅/高さを設定すると、要素の実際に表示される高さと幅が大きくなるという意味です (ボーダーとパディングは幅/高さにも計算されます)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>この方法を使用してパディングのある小さなボックスを取得したい場合は、境界線とパディングの幅を考慮する必要があります。
CSS3 のボックス サイズ設定プロパティは、この問題を非常にうまく解決します。
CSS3のボックスサイズ設定プロパティを使用する
CSS3のボックスサイズ設定プロパティには、要素の幅と高さのパディング(padding)とボーダー(border)が含まれます。
要素に box-sizing: border-box; が設定されている場合、padding (内側のマージン) と border (ボーダー) も幅と高さに含まれます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>結果から、 box-sizing: border-box ;効果は向上しており、これはまさに多くの開発者が必要としているものです。
次のコードは、より直感的な方法ですべての要素のサイズを表示できます。多くのブラウザーはすでに box-sizing: border-box; をサポートしています (ただし、すべてではありません。そのため、width: 100%; の input 要素と text 要素の幅が異なります)。
りー- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜 