ボックスモデル

CSSボックスモデルはCSSではごくわずかな文脈で投げられた用語ですが、おそらくCSSで知ることができる最も基本的なことです.簡単に言えば、ボックスモデルは、ページ上の任意のオブジェクトのサイズ、マージン、およびパディングを決定します.また、CSSは'インライン'と'ブロック'内容を扱う奇妙な方法を指します.

ボックスモデル
HTMLでは、すべての要素がボックスを作成します.SpanとPのようなこれらの要素の一部はインラインで、ページの構造上の要素ではなくテキストと並びます.
divのような他の要素は大きな'ブロック'要素です.各要素は異なるタイプを持っているので、HTMLとCSSの両方を学習するとき、これらに慣れることは役に立ちます.
ブロック要素は固定された幅と高さを持ちます.そして、高さはすべてのページにわたります.インライン要素はテキストの行の中にあります.しばしば使用される要素のもう1つのタイプはインライン・ブロックである.そして、それは単にテキストのブロックの範囲内のインライン・コンテクストの範囲内で、固定幅および高さのブロックである.
要素がインラインまたはブロックであるかどうかに関係なく、すべての要素には多数のコア' box '属性があります.それらは以下のイメージに示されます.

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 5px;
}

パディングとマージンについては、それぞれ同じ側で別々にそれぞれの側を参照することもできます.CSSでは、各サイドを参照しているときに、順序は、右上、下、左です.以下の例を見てください.

div {
    /*  top side padding: 10px
        right side padding: 20px
        bottom side padding: 5px
        left side padding: 10px
    */
    padding: 10px 20px 5px 10px;
}

また、トップパディング、パディングライト、パディングボトム、パディング左を使用してこれらを直接呼び出すことができます.マージンにはまったく同じプロパティが存在します.

div {
    margin-left: 20px;
}

クイックケーススタディ
箱モデルがどのように働くかについてもう少し考えましょう.新しいdivを作成し、以下のように、40 pxの幅、20 pxのパディング、2 pxの境界線を与えます.また、マージンの4 pxを追加します.

div {
    width: 40px;
    padding: 20px;
    border: 2px solid black;
    margin: 4px;
}

箱の大きさは?
幅が40 pxであるので、パディングは20 pxであり、境界は2 pxで、ページに表示される合計幅は実際に84 pxです!
もう少し説明するために、図に示す幅はパディングを除いた幅です.パディングが20 pxであるので、CSSは箱のすべての側面に20 pxを加えます.これは20 px、右に20 px、右の40 pxを意味します.我々が我々の幅に加えるとき、我々は80 pxを得ます.
最後に、我々は、右側に2 px、左側に2 px、divの周り全体の境界の2 pxを持っている.結果は40 px + 40 px + 4 px、または84 pxです.

ディスプレイ
CSSボックスモデルにはDisplayという別のプロパティもあります.これにより、アイテムを隠すことができます.ディスプレイはまた、ブロックまたはインラインに特定のHTMLを設定することができます.ボックスモデルの目的のために、いくつかのキープロパティを考えてみましょう.

None -アイテムは隠します.

inline -項目はインラインで、すなわちテキストとインラインである.

ブロック-アイテムはブロックです.すなわち、それは全体の幅を取って、新しい線で始まります.

インラインブロック-項目はテキストでインラインです、しかし、それは幅と高さをCSSでそれに加えられることができます.

目次-その容器が存在しないかのように表示され、上の容器に追加される.
CSSボックスモデルの表示プロパティ

の例
簡単な例を見てみましょう.スパンがブロック要素として強制される例については、次のコードが表示されます.span要素は典型的にインラインであるので、この例はspanのような要素の箱の特性をこのdivに与えます.

span {
    display: inline;
    width: 100px;
    height: 30px;
    padding: 10px;
}

ボックスサイジング
CSSがパディング、幅、およびボーダーを管理する方法は、常にCSSコミュニティでの競合のポイントでした.このように、プロパティは、ボックスのサイズ変更として知られているこれを救済するために作成されています.ボックスのサイズ変更は、このデフォルトの動作をオーバーライドします.
我々の40 px幅ボックスについて考えてみましょう.ボックスのサイズを設定できます.
ボーダーボックス:幅にボーダーとパディングが含まれています.パディングとボーダーでさえ、我々の幅は現在40 pxになります.
コンテントボックス:既定の動作、幅はボーダーとパディングを除外します.私たちの合計幅は84 pxになります.
今、私たちはより多くのコントロールを持っています、そして、我々が彼らがページに期待するように、彼らが確実に表示される我々の幅を確実にすることができます.

ボーダー
境界線は、我々が箱モデルに影響を及ぼすことができるもう一つの方法です.境界線は、境界要素、境界線、境界線または境界線を使用して、全体の要素を囲むか、特定の側に関して定義されることができます.以下に例を示します.

div {
    border: 1px solid red;
    border-top: 2px solid black;
}

ボーダープロパティを別の行に分割することもできます.1 pxソリッドレッドは次のように書くことができます.

div {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

同様に、トップサイドのボーダートップの幅、ボーダートップの色やボーダートップのスタイルに、これらを適用することができます.我々は、任意の側のためにこれを行うことができます.
色は、任意の色を受け入れ、色のセクションで色についての詳細を学ぶことができます.Border Styleプロパティは以下の値を受け取ります.None、hidden、ドット、破線、Solid、Double、Groove、Ridge、Inset、outset.

境界半径
最後に、境界線半径私たちのdivに丸いエッジを追加することができます.これは箱モデルには影響しませんので、要素のサイズは同じままですが、美学に影響を与えます.それはどんな単位でも受け入れます-しかし、私は以下の例としてピクセルを使用しています.単位が大きいほど丸めが大きくなる.以下にその方法のコードの例を示します.

div {
    border-radius: 20px;
}

結論
それはボックスモデルを理解するために知っておく必要があるすべてです.あなたの知識をテストすることに興味があるならば、I've also made a quiz which you can check out here .読書ありがとう.