CSSボックスモデル

ボックス モデルは、コンテンツ、パディング、ボーダー、マージンで構成されます。ボックスには、幅、高さ、パディング、ボーダー、マージンの 5 つの主要な属性のみがあります。

ボックス内のエリアを1つずつ紹介します

幅

幅、CSS の幅はボックスの幅ではなくコンテンツの幅を指します、CSS の高さはボックスの高さではなくコンテンツの高さを指します

リーリー

上記のコードは幅を 200px に設定し、コンテンツの幅は 200px ですが、ボックス上にマウスを移動すると、表示される幅は 310px になります。この幅がボックスの幅です。 実際に占有される幅 =左ボーダー + 左パディング + 幅 + 右パディング + 右ボーダー、ボックスの実際に占有される幅を変更しないようにしたい場合は、幅を追加するにはパディングを減算する必要があります。パディングを追加すると幅が狭くなります。

例えば、402*402のボックスを3つ書くと、答えは無限にあります。その組み合わせは上記の式に従って計算するしかありません

。

リーリー

パディング

パディングはパディングです。 CSS2.1の前提でパディング領域には背景色があり、その背景色はコンテンツ領域と同じでなければなりません。言い換えれば、背景色は境界線内のすべての領域を塗りつぶします。

パディングは 4 方向なので、それぞれ 4 方向のパディングを説明できます。 2 つの方法があり、1 つ目は小さな属性を記述する方法で、2 つ目はスペースで区切って包括的な属性を記述する方法です。

Small 属性: このタイプは、値を一方向にのみ設定する必要がある場合に適しています。そうでない場合は、全方向に書き込むのが面倒になります。

リーリー

包括的な属性: 方向は上、右、下、左です

リーリー

一般的な使用法は次のとおりです: 小さな属性を使用して大きな属性をスタックします

リーリー

大きな属性の前に小さな属性を書くことはできません

リーリー

本当にマスターしたかどうかを確認するために、以下のテストを受けてください?下のボックスの実際の幅と高さを教えてください

リーリー

実際の占有幅 = 200 (コンテンツの幅) + 20 (左のパディング) + 40 (右のパディング) + 1 (左の境界線) + 1 (右の境界線) = 262px

パディングはボックスのサイズに影響しますが、幅は継承され、パディングは押し出されません 。

一部の要素には、ulタグなど、デフォルトでパディングが含まれていますそのため、ウェブサイトを作成する際の制御を容易にするために、私たちは常にこのデフォルトのパディングをクリアしたいと考えています

:

リーリー

* は効率的ではないため、すべてのタグをリストするために共用体セレクターを使用します

リーリー

境界線

ボーダーは国境です。枠線には、太さ、線種、色の 3 つの要素があります。色が指定されていない場合、デフォルトは黒です。他の 2 つの属性が記述されていない場合、境界線は表示されません。主要なブラウザでは枠線のレンダリングに若干の違いがありますので、詳しくはこちらの記事をご覧ください

。

リーリー

Border は、大きな包括的な属性です。上記のコードは、4 つの境界線を 1 ピクセルの幅、実線の種類、赤色に設定します。

ボーダー属性を逆アセンブルするには、主に 2 つの方法があります。

1) 3 つの要素を押します:

リーリー

リーリー

特定の小さな要素の後にスペースで区切られた複数の値が続く場合、順序は

上、右、下、左:

リーリー

2) 押す方向:

リーリー

リーリー

方向に従って別のレイヤーを分割できます。つまり、各要素を各方向に分割し、合計

12 ステートメント:

リーリー

border可以没有

border:none;
/*某一条边没有*/
border-left: none;
/*或者*/
border-left-width: 0;