HTMLにはレイアウトの点で非常に重要なモデルがあり、それがボックスモデルです。ボックスモデルでは、ラベルのコンテンツはアイテムとして理解され、CSSスタイルはアイテムを含むボックスとして理解されます。ブロックレベルのタグはすべてボックスモデルの特性を備えており、このボックスをCSSで設定して独自のレイアウトを実現できます。ここでは簡単な図を描き、他の属性を使用した方が良いと思うので、内側のパディングとマージンのみを書きました。テキストとコードを理解するには、同様に、コードの実験とテストに熱心に取り組む必要があります。そうしないと、知識を習得するのが非常に困難になります。まず、ボックスです。ボックスはコンテンツを含んでいます。最初の黒いボックスであるボックスとコンテンツ (オレンジ色のブロック) の間にパディング (緑色) があります。ボックスとボックスの間の距離はマージン (紫色) と呼ばれます。ボックスには Border (青) があり、これら 3 つの部分には、内部パディングの padding-top、padding-left、padding-right、padding-bottom などの 4 つの方向の属性があります。この値は、コンテンツの位置に影響を与えます。かなり明確に見えます (描画能力は比較的低いです)
誰もがテストして学習できるように、さまざまな属性について簡単に説明します。ラベルの紹介は、私の能力が限られているので、自分で理解できるものもありますが、表現がそれほど鮮やかではないかもしれないので、誰もが少し見てテストしてください
ボーダー（境界線）
ボーダー。ボックスモデルの幅、線種、色を指定すると、コードは次のようになります。
}div{
border:2px Solid red;
}
border-style (ボーダースタイル) と省略することもでき、一般的なものは 3 つあり、破線 (破線)、点線 (点線)、実線(実線)
border-color (境界線の色)、この色の設定はすべて同じです。色の英語名を使用することも、色の 16 進値を使用することもできます。
border-width (境界線の幅)、通常はピクセル値が続きますが、thin、medium、thick というタイプの値もありますが、非常に珍しいので、前に説明しました
その境界線についても簡単に説明します。は4方向の属性を持っているので、4辺ではなく1辺だけ個別にボーダーを設定する必要がある場合は、設定時にborderを書く必要はありませんが、border-bottom.
ボックスモデルは幅やheight
CSSのスタイルシートコードは次のとおりです:
div{
width:200px;
height:100px;
border:1px Solid red;
margin: 10px; 、答えは2 * 10pxである必要があります。 + 2 * 1px + 2 * 20px + 200px = 262px これはボックスモデルの完全な幅です。高さは同じなので説明しません
}
この実装の効果は上記の完全版と同じです
上下左右のパディングが同じ場合は
div{
padding:20px;
}
上下のパディングが同じ(10px)、左右のパディングが同じ(20px)の場合
div{
padding:10px 20px;
外側の間隔は内側のパディングと同じで、パディングをマージンに変更するだけで、上記の設定の省略形はすべて適用できるので繰り返しません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
