CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのボックスモデルとは何ですか？

HTMLドキュメントのすべての要素は、ブラウザによって長方形のボックスとしてレンダリングされます。幅、高さ、パディング、マージンによって、要素の周囲に割り当てられるスペースが決まります。次の図は、ボックスモデルの概念を示しています-

CSSのボックスモデルとは何ですか？

出典：w3.org

コンテンツ

これには、テキスト、画像、またはその他のメディアコンテンツの形式の実際のデータが含まれます。幅と高さのプロパティは、このボックスの寸法を変更します。

パディング

コンテンツの外縁とその境界の間のスペースは、パディングを指します。このボックスは、paddingプロパティによってサイズを変更できます。 padding-left、padding-bottomなどのエッジ固有のプロパティは、カスタム間隔を実現するのに役立ちます。

境界線

パディングの外縁とマージンの内縁の間の距離は、要素の境界を定義します。デフォルトでは、その幅は0に設定されています。borderプロパティは、要素の境界線を定義するために使用されます。個々のエッジのスタイルを設定することもできます。

マージン

要素のボックスとその周囲の要素のボックスの間のスペースは、マージンとして定義されます。これは、ページの端とそのコンテンツの間のスペースとして定義されるページマージンに類似しています。これは色が透明で、要素の境界の外側の領域をクリアすることを除いて、パディングのプロパティをシミュレートします。パディングと同様に、個々のエッジを定義してカスタムマージンを設定できます。

例

<!DOCTYPE html>
<html>
<head>
<style>
body * {
   outline: solid;
}
#demo {
   margin: auto;
   width: 50%;
   padding: 1em;
   border: 1px outset;
   display: flex;
   box-shadow: inset 0 0 15px mediumvioletred;
   box-sizing: border-box;
}
#demo div {
   padding: 2em;
   box-shadow: inset 0 0 9px orange;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSのボックスモデルとは何ですか？

例

<!DOCTYPE html>
<html>
<head>
<style>
body * {
   outline: thin dotted;
}
#demo {
   margin: auto;
   width: 120px;
   height: 120px;
   padding: 1em;
   border: 1px outset;
   display: flex;
   box-shadow: inset 0 0 15px indianred;
}
#demo div {
   width: 40px;
   height: 40px;
}
div:nth-child(odd) {
   border: inset lightgreen;
   border-bottom-right-radius: 100px;
   border-bottom-left-radius: 100px;
}
div:nth-child(even) {
   border: inset lightblue;
   padding: 0.5em;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSのボックスモデルとは何ですか？


  1. CSSボックスモデルを理解する

    HTMLドキュメントの各要素は、CSSによって長方形のボックスとして扱われます。これはデフォルトのレイアウトスキームであり、要件に応じてカスタマイズできます。要素、そのコンテンツ、およびそれらの周囲の要素の配置は、CSSのボックスモデルに従って行われます。 まず、次の画像に示すようなボックスモデルのレイアウトから始めましょう。 出典：w3.org コンテンツ これには、テキスト、画像、またはその他のメディアコンテンツの形式の実際のデータが含まれます。幅と高さのプロパティは、このボックスの寸法を変更します。 パディング コンテンツの外縁とその境界の間のスペースは、パディ

  2. CSSの背景の添付ファイル

    CSSのbackground-attachmentプロパティは、ビューポートに対してページをスクロールするときの背景画像の位置を指定するために使用されます。値をスクロール、固定、ローカルにすることができます。 構文 CSSbackground-attachmentプロパティの構文は次のとおりです- Selector {    background-attachment: /*value*/ } 例 次の例は、CSSのbackground-attachmentプロパティ-を示しています。 <!DOCTYPE html> <html> <hea