ボックスのコンポーネントと考慮事項 model_html/css_WEB-ITnose

ボックス モデルには、コンテンツ (幅+高さ)、パディング、ボーダー、マージンの 4 つの部分が含まれます。具体的なビューは次のとおりです。

通常、Chrome のデベロッパー モードを使用してデバッグすると、上記のように各ボックス モデルがリストされるため、バグを見つけやすくなります。 (さらに、開発者モードでコードを直接追加、削除、変更して、リアルタイムでページの変更を観察することもでき、便利で高速です)

内容: の部分です上図のパディング下の点線、ボックス内 モデルに入力した内容が中に表示されます。

パディング: パディングはボックスの面積を増やし、次のように割り当ては上から時計回りに進みます。

1 のみの場合。 1 つの値。周囲に同じパディングが付きます。

2. 値が 2 つだけある場合は、最初の値が上部と下部を制御し、2 番目の値が右側と左側を制御します。 3. 値が 4 つの場合、最初の値が上を制御し、2 番目の値が右と左を制御し、3 番目の値が下を制御します。

4 の場合。パディング割り当ての原則に従います。

たとえば、padding: 10px 20px 30px 40px; つまり、padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px.

border :

は外部に埋め込まれており、ボックスの面積が増加します。細分化された属性が多数あります。たとえば、 border-width: 2px;

border-style: crashed;

border-color: シアン;

border-top-radius:10px;

....

border:width、line colorなどよく使う属性をまとめて記述できます。

線の種類には一般的に、実線 (実線)、二重 (二重実線)、破線 (破線)、点線 (点線) があります。

色は通常、次の 3 つの方法で表現されます: 直接割り当て (color:black)、10 進数割り当て (rgb(12,45,3))、16 進数割り当て (#2fe800)。

注:パディングとボーダーを使用する場合は、それに応じてボックスの幅と高さを必ず縮小してください (width/height-padding/border-width*2)

ボックスの面積 s = (border-left-width+padding- left+width +border-right-width+padding-right)*(border-top-width+padding-top+height+padding-bottom+border-bottom-width)

margin:

距離の外側では、周囲の要素からの距離を設定します。割り当て順序はパディングと同じです。 注: 同じレベルでマージンを使用すると、重複現象が発生します。つまり、2 つの間の距離が大きい方に依存します。マージン値。float または display 属性を使用して同じ行に表示する場合、ブロック属性の階層が親子の場合、2 つの間の距離はマージン値の合計になります。最初の子が margin-top を使用すると、その効果は親に転送されます。これは、親に margin-top を設定することと同じです。 🎜>1. 親に境界線を追加しますが、計算量が増加し、スケーラビリティに一定の制限がかかります。

2. 親に属性を追加します。 : hidden;

3. 親には margin-top を使用せず、padding-top を使用します。