次の図に示すように、Web ページの各要素はボックス モデルとして見ることができます。
コンテンツエリア(content)
コンテンツ領域は、ボックス モデル全体の中心であり、テキストや画像などのリソースであるボックスのメイン コンテンツが格納されます。コンテンツ領域には、幅、高さ、オーバーフローの 3 つの属性があります.幅と高さの属性は、ボックスのコンテンツ領域の幅と高さを指定するために使用されます.コンテンツ情報がコンテンツ領域で設定された範囲を超える場合、オーバーフローを設定するオーバーフロー属性 コンテンツの処理方法。オーバーフロー属性には 4 つのオプション値があります。
- hidden: オーバーフロー部分を非表示にすることを示します。
- visible: はみ出した部分を表示することを示します (はみ出した部分はボックスの外に表示されます)。
- scroll: コンテンツ領域にスクロール バーを追加することを意味します。スクロール バーをスライドして、コンテンツ領域のすべてのコンテンツを表示できます。
- auto: ブラウザーがオーバーフローの処理方法を決定することを示します。
次のコードは、ボックス モデルのコンテンツ領域を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: #CFF;
}
div.box-one {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<div class="box-one">ボックスモデル</div>
</div>
</body>
</html> 実行結果は次の図のとおりです。
上図左のボックスモデルの模式図は、ブラウザのデバッグツールで見たもので、ショートカットキーF12押すか、ページ上で右クリックして「検査」オプションを選択することで開くことができますポップアップメニュー。
パディング(padding)
padding は、コンテンツ領域と境界線の間のスペースです. padding-top、padding-right、padding-bottom、padding-left およびそれらの短縮プロパティ padding を使用して、コンテンツ領域と境界線の間のすべての方向の距離を設定できます。ボックス モデルの背景プロパティを設定する場合、背景プロパティはパディング領域をオーバーライドできます。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: #CFF;
}
div.box-one {
width: 100px;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div>
<div class="box-one">ボックスモデル</div>
</div>
</body>
</html> 実行結果は次の図のとおりです。
border
ボーダーは、コンテンツ領域とパディングの周囲の境界です。border-style、border-width、border-color、およびそれらの省略形プロパティ border を使用して、ボーダーのスタイルを設定できます。その中で、border-style 属性はボーダーで最も重要な属性であり、この属性が設定されていない場合、他のボーダー属性も無視されます。
注: IE ブラウザーでは、背景属性は境界領域をカバーしませんが、他の主流のブラウザーでは、背景属性は境界領域をカバーできます. 境界線が点線に設定されている場合、点線。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background: #CFF;
}
div.box-one {
width: 100px;
height: 100px;
border: 10px dashed red;
padding: 20px;
}
</style>
</head>
<body>
<div>
<div class="box-one">ボックスモデル</div>
</div>
</body>
</html> 実行結果は次の図のとおりです。
マージン(margin)
外側の余白は、ボックス モデルの最も外側の端に位置し、境界線の外側のスペースです. 外側の余白を介して、ボックスが互いに密に接続することはできず、CSS レイアウトの重要な手段です. margin-top、margin-bottom、margin-left、margin-right、およびそれらの省略形プロパティ margin を使用して、各方向のマージンの幅を設定できます。
2 つの隣接する (水平または垂直に) マージンのあるボックスの場合、それらの間の距離はそれらのマージンの合計ではなく、マージンの大きい方の値になります。また、外側の余白の値を負の値に設定することもできます.外側の余白の値が負の場合、ボックス全体が反対方向に移動し、一定のレベルに達すると、ボックスが重なります.
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background: #CFF;
}
div.box-one {
width: 100px;
height: 100px;
border: 10px dashed red;
padding: 20px;
margin: 15px;
background: #CCC;
}
div.box-two {
width: 50px;
height: 50px;
border: 10px dotted black;
padding: 20px;
margin: 20px;
background: yellow;
}
</style>
</head>
<body>
<div>
<div class="box-one">ボックスモデル</div>
<div class="box-two"></div>
</div>
</body>
</html> 実行結果は次の図のとおりです。
CSS で幅と高さのプロパティを使用して要素の幅と高さを設定する場合、実際に設定するのは要素のコンテンツ領域の幅と高さだけであり、要素の実際の幅と高さもいくつかの他の要因に依存します:
- 合計幅: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 合計の高さ: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
