記事のディレクトリ
3.6。ボックスモデルの実際のサイズ
ボックスモデルの実際のサイズ
ページを作成するためのコードに従ってください：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真实尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
次のようにページの表示は次のとおりです。
![[画像のダンプはチェーンが失敗し、発信局は、直接アップロード（IMG-OPLrrA3L-1580370288876）（../画像/ box_size.jpg）ダウン画像を保存することが推奨され、セキュリティチェーン機構を有していてもよいです]](https://img-blog.csdnimg.cn/20200130154455125.png)
ページは、上記の結論によって得られる：ボックスは、コンテンツの幅と高さではなく、カートリッジ自体は次のように、箱の幅と高さのセットの幅と高さは、ボックスの実際のサイズが計算されます。
- 左右の幅+パディング+枠線の周りにボックスの幅=
- 高さ=高さ+パディングボックス+ボーダー垂直に上下
理解力は行使
以下のボックスを作り、ボックスモデルの原則によって：
![[画像のダンプはチェーンが失敗し、発信局は、直接アップロード（IMG-9p7cf8PS-1580370288877）（../画像/ practice01.jpg）ダウン画像を保存することが推奨され、セキュリティチェーン機構を有していてもよいです]](https://img-blog.csdnimg.cn/20200130154458233.png)
