プローブボックスモデル

テキストリンク:http://learn.shayhowe.com/html-css/opening-the-box-model/
この文章は上記のリンク文章のいくつかの読書ノートと心得です.週間計画の交付物の一部でもあります.
文章の核心内容はcssの中で非常に重要なボックスモデルの概念を紹介して、“ウェブページの要素はどのようにページの上で表します”のこのような質問に答えます.この質問に答えるには、学習ボックスモデルの前にcssの属性displayを理解する必要があります.

display

各要素にはデフォルトのdisplay属性があり、要素の種類によってデフォルト値も異なり、一般的なdisplay属性はblock、inline、inline-block、noneブロックレベル要素のデフォルト値はblock、インライン要素のデフォルト値はinlineである.ここで、blockは要素をブロックレベル要素とし、inlineは要素をインライン要素とする.inline-blockを使用すると、この要素はブロックレベルの要素のようにすべてのボックスモデルのプロパティを受け入れますが、他の要素と一緒に1行を共有することもできます.noneを使用すると、要素は完全にページに消え、存在しないように空席を占めません.

ボックスモデル

アクセントページの各要素は、長方形cssに一連の属性があり、長方形要素のサイズを決定します.通常、display、width、height、padding、border、marginのいくつかの要素が決定されます.
1つの要素の幅は、次の式で計算できます.
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
高さの計算式は次のとおりです.
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
各プロパティについて簡単に説明します.

width && height

widthのデフォルト値はdisplayのプロパティに依存し、ブロックレベルの要素の場合、widthはデフォルトで100%で、行全体の幅を占めます.Inlineとinline-block要素は、1行に入れないと次の行に押し込まれます.インライン要素は固定寸法を持つことができず、widthとheightは非インライン要素にのみ作用する.heightのデフォルト値は、コンテンツ自体によって決まります.

margin

marginプロパティは、ある要素を囲む周囲の空間です.エレメント間の優雅な距離を保つことができます.marginのtopとbottomはインライン要素に受け入れられないことに注意してください.

padding

paddingプロパティはmarginと似ていますが、marginのように外部ではなく要素のborder内部にあります.paddingのtopとbottomは、インライン要素で使用できますが、要素の外部にオーバーフローする可能性があります.

marginとpaddingの声明

div {
margin: 20px; #      20px
margin: 10px 20px; #top bottom 10px，left right 20px
margin: 10px 20px 0 15px; # top              
margin-top: 10px; #   top  
}

border

borderはmarginとpaddingの間に要素に枠線を提供します.borderプロパティには、width、style、colorの3つの値が必要です.長い式をborder-width,border-style,border-colorとする.短い式の例を示します.

div {
border: 6px solid #923233;
}

同時に、borderがある方向にのみ現れることを許可することもでき、border-bottomは下部のborderのみを表示することができる.
もう1つのレイアウト方法Box sizing