Box Model

緒論

Box Modelは久しぶりです.
後輩に質問された時、私はただ答えればいいのですが、私は持っていませんでした.
考えてみると、css、htmlをよく勉強したことがないようです.
もし面接の質問にこのような質問があったら、私はどのように答えますか?
このような後輩や他の人が質問したらどうしますか?
他のhtml部分とcssはどうですか?
この考えは徐々に私の脳を蚕食し、だんだん不安に陥った.
自分が知らないことを他人が知っていれば、人間は二つの反応をする.
不安になったり、意志が燃えたりします.後者になりたい.

Box Model?

ある程度、フロントを経験した人は必ず使ったことがあります.
Boxモデルはhtml要素の大きさを指定するやつを指す用語と考えている.
写真ソース:MDN Box Model
このテーマについて説明しすぎた写真があったので持ってきました.
まず中からゆっくり理解します.

Content

Contentはhtmlに必要な情報を直接示す場所だと思います.
htmlコードで直接見ましょう

<div style="font-size: 20px; width: 100px; height: 100px">
  hello world hello world hello world hello world
</div>

次のビューが表示されます.△隣に空きがあるのは、写真を撮りやすいように、中心を上に置いたからです.
この要素を参照するには、ここの開発者モード(F 12)をクリックします.

以下のように見える.ここを見ると青い箱が100*100と表記されていて、
その部分は内容部分です.contentはwidthとheightによって決定される.

padding

paddingは、コンテンツと後で現れるborderとの間隔を調整するためのスペースと考えられています.
ここでpaddingはwidthとheightの影響を受けない.
widthとheightにpaddingを含める場合は、cssプロパティbox-size:border-boxを使用します.
cssはpadding:サイズ;のように使えばいいです.

実例でテストしてみます.

<div
     style="
      font-size: 20px;
      width: 100px;
      height: 100px;
      padding: 20px
      border: 1px solid black;
     "
>

次の写真を見るとborder(黒い線、後述)とcontentが少しずれているのが見えますか?
それはpadding:20 pxが完成した仕事です.
f 92をクリック

paddingの合計は20であることがわかります.
(borderを一時的に与えたので値を含む)
ここでbox-size:border-boxをあげたらどうなりますか?

<div
     style="
      font-size: 20px;
      width: 100px;
      height: 100px;
      padding: 20px
      border: 1px solid black;
      box-sizing: border-box;
     "
>

内容の長さはpaddingのように減少していると考えられ,文字の氾濫が見られる.

border

borderは要素の境界を表すと考えている.
それ以外に特別な点はありません.box-size:border-boxを実行しても、borderはwidth、heightに影響しません.
cssはborder:(サイズ)(どのborderを書くか)(太さ);使用します.
実際に使ってみましょう.

<div
      style="
        font-size: 20px;
        width: 100px;
        height: 100px;
        border: 1px dotted red;
      "
    >

contentを囲む赤い点が表示されます.(paddingは付与されていないのでpaddingはありません.)
開発者モードを開いて確認します.

こんな感じに見えます.border 1 pxを与えたが,css計算ではいくつかの誤差が生じる可能性がある.

margin

marginは要素と他の要素の間の間隔を意味すると思います.
エレメントの位置を調整するのによく使用されます.もちろんwidth、heightは含まれません.
cssはmargin:サイズ;使用します.
実際のコードで理解してみましょう.

<div
      style="
        font-size: 20px;
        width: 100px;
        height: 100px;
        border: 1px dotted black;
        margin: 100px;
      "
    >
      hello world hello world hello world hello world
    </div>
    <div
      style="
        font-size: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
      "
    >
      hello world hello world hello world hello world
</div>

これにより、白い要素と赤い要素の間の間隔が空であることがわかります.
その部分は余白です.
開発者モードで確認します.

余白が見える.

n/a.結論

htmlを見てみましょう.