【フロントエンド基礎編】ボックスモデル、マージン、ボーダー、マージン結合について詳しく解説

1. ボックスモデルのコンセプトと構成

1.1 生活の例

たとえば、コンピュータを購入したときに速達で配送される箱全体をボックス モデルとみなすことができ、これが外ラベルとして html に反映されます。

物を保持したい場合、ボックスには特定のサイズが必要です。これは CSS に反映され、width 属性と height属性によって設定されます。

このとき、購入したコンピュータを箱に入れ、このコンピュータが箱に収納される内容となります。

輸送中にコンピューターの画面が圧迫されるのを防ぐために、箱の内側とコンピューターの間にいくつかのパディング（フォーム）を追加する必要があります。パディングはインナーパディングと呼ばれ、外箱を満たすパディングであることがCSSに反映されています。パディングを追加すると、コンピューターを保持するためにより大きなボックスを使用する必要があります。

このとき、アイテムの重要性、圧力が怖いかどうかなどに応じて、適切なテクスチャを持つカートンを選択し、カートン枠の線引き出します。

パソコンを梱包した後、宅配業者への輸送が始まりました。ただし、店は全員のコンピュータの注文を宅配会社に渡します。コンピュータの梱包には何日もかかります。宅配業者がコンピュータを受け取ると、これらの貴重品については簡単な処理を行うことができます。箱の間。これらのボックスの外縁間の間隔または距離は、マージンとして CSS に反映されます。

1.2 コンセプト

CSS (Cascading Style Sheet) は、「カスケード スタイル シート」または「カスケード スタイル シート」と翻訳でき、HTML 要素の表示方法を定義し、Web ページの外観を制御するために使用されます。CSSを利用してページの内容と表示を分けることで作業効率が大幅に向上します。CSS は、すべての HTML ドキュメント要素が、HTML ドキュメント レイアウト内で要素が占めるスペースを記述する長方形の要素ボックスを生成すると想定します。これは、視覚的にボックスと見なすことができます。

CSS は、これらのボックスを中心に「ボックス モデル」の概念を生成します。一連のボックス関連のプロパティを定義することで、各ボックス、さらには HTML ドキュメント全体のパフォーマンスとレイアウト構造を大幅に強化および促進できます。ボックスである要素の場合、特別な設定がない場合、デフォルトで常に独立した行を占有し、幅はブラウザ ウィンドウの幅になります。ボックスであるかどうかに関係なく、その前後の要素は可能です。上下のみを配置する、つまり上下を足して配置します。

HTML 文書の各ボックスは、内側から外側に向かって、コンテンツ領域 (content)、パディング (padding)、ボーダー (border)、およびマージン (margin) の 4 つの部分で構成されていると見ることができます。CSS は 4 つのパーツに関連する一連のプロパティを定義しており、これらのプロパティを設定することでボックスのパフォーマンスを向上させることができます。

2. ボックスモデル構成分析

ボックス モデルは、コンテンツ、パディング、ボーダー、マージンの 4 つの部分で構成されます。

2.1コンテンツエリア（コンテンツ）

コンテンツ領域はボックス モデルの中心であり、ボックスの主な情報コンテンツ (テキスト、画像、その他の種類) が表示されます。コンテンツ領域には、幅、高さ、オーバーフローという 3 つのプロパティがあります。

• width 属性と height 属性は、ボックスのコンテンツ領域の高さと幅を指定します。

• 属性オーバーフローは、ボックスからはみ出したコンテンツの処理方法を指定します。属性値は次のとおりです。

  • 非表示にすると、オーバーフロー部分は表示されなくなります。

  • 表示されている場合、オーバーフロー コンテンツ情報は表示されますが、ボックスの外側に表示されます。

  • スクロールすると、ボックスにスクロール バーが自動的に追加され、ユーザーはスクロール バーを引くことでコンテンツ情報を表示できます。

  • auto、オーバーフローを処理する方法はブラウザーによって決定されます。

    コンテンツ情報が多すぎてコンテンツ領域の範囲を超える場合、オーバーフロー overflow 属性を使用して処理方法を指定できます

注: ボックス モデルはすべてのページ レイアウトの基礎であり、最も重要なコンテンツと言えます。家を建てるときの基礎と同じで、基礎がしっかりと築かれていないとすべてが無駄になってしまいます。

2.2 内部パディング（パディング）

パディングとは、コンテンツ領域と境界線の間のスペースです。

• 充填方向に合わせて

  • パディング -トップ
  • パディング - 底部
  • パディング -左
  • 右パディング

• 値で割る

  上記の 4 つの方向を組み合わせると、プロパティのパディングを埋めるショートカットが作成されます。

  • 単一値メソッド
  • バイナリメソッド
  • 3値法
  • 4値法

注: これら 5 つのプロパティは、コンテンツ領域の情報コンテンツと各方向の境界線の間の距離を指定するために使用できます。ボックスの背景色のプロパティを設定すると、塗りつぶされた領域まで背景色を拡張できます。

2.3ボーダー（枠線）

境界線は、コンテンツ領域とパディングの周囲の境界線です。

• さまざまな属性に応じて分類する

  • ボーダースタイル ボーダースタイル

    1. この属性は境界線の最も重要な属性です。境界線スタイルが指定されていない場合、他の境界線属性は無視され、境界線は存在しません。

    2. CSS では、次のように点線、破線、実線など 9 つの境界線スタイルを指定します。
       

  • 境界線の幅 境界線の太さ

    1. 属性値は長さの測定値、または CSS で指定された細、中、厚のいずれかにすることができます。

  • 境界線の色 境界線の色

• 方向に応じて次のように分類されます。

  ボーダートップスタイル: ソリッド

  境界線の左の色: 赤

  ボーダーの下の幅:10px;

• 値の数に応じて分類する

  border-style:top right bottom left

  border-width:top right bottom left

  border-color:top right bottom left

  /*同时设置四个方向的样式*/
  /*设置的边框样式*/
  /*一个值代表四个边框都是一样的*/
  /*border-style:solid;*/
  /*设置两个值  第一个上下单实线 第二个左右双实线*/
  /*border-style: solid double ;*/
  /*设置三个值 第一个是上单实线 第二个左右双实线  第三个下虚线*/
  /*border-style:solid double dashed;*/
  /*四个值 分别是对应上右下左的设置*/
  border-style:solid double dashed dotted;
  
  /*设置边框的厚度 和上面一样 一个值 两个值 三个值 四个值*/
  /*border-width: 4px;*/
  /*border-width: 4px 10px;*/
  /*border-width: 4px 10px 1px;*/
  border-width: 4px 10px 8px 20px;
  
  /*设置颜色 和上面一样*/
  /*border-color: red;*/
  /*border-color: red blue;*/
  /*border-color:red blue green;*/
  border-color:red blue green orange;
  

上記 4 方向の短縮プロパティを組み合わせて、border:style width color; 4 つの側面に同じスタイルを設定します

注: ボックスの背景色のプロパティを設定する場合、IE では背景は境界領域まで広がりませんが、FF などの標準ブラウザでは、特に単一の境界線が点線または点線に設定されている場合、背景色が境界領域まで広がる可能性があります。破線。

ボーダーケース：三角作り

二等辺三角形の生成:

/*设置元素为行内块元素：能设置宽高 且能与其它行内级元素在同一行内排列*/
display: inline-block;

/*border: solid 100px red;
border-left-color: white;
border-bottom-color:white;
border-right-color:white;*/
	
/*简化*/
/*border: solid 100px white;
border-top-color: red;*/
	
/*当祖先有背景的情况下，白色很突兀，这个时候请使用 透明色替换白色*/
border:solid 100px transparent;
/*箭头朝下  上面边框设置颜色*/
/*border-top-color: red;*/
/*箭头朝上  下面边框设置颜色*/
/*border-bottom-color: green;*/
/*箭头朝左  右边*/
/*border-right-color: orange;*/
/*箭头朝右  左边*/
border-left-color: purple;

直角三角形の作成: 直角の位置に応じて、2 方向の境界線が予約されます。たとえば、左上隅は 左と上の境界線を保持します。

display: inline-block;
margin-left: 200px;
	
border: solid 50px transparent;
/*直角在左上角*/
border-left-color: red;
border-top-color: red;

2.5 マージン（余白）

マージンはボックスの最も外側の端であり、境界線の外側の周囲に追加されるスペースです。マージンはボックスが互いに緊密に接続されるのを防ぎ、CSS レイアウトの重要な手段です。

• 充填方向に合わせて

  • マージントップ
  • マージン-ボトム
  • マージン-左
  • 右マージン

• 値で割る

  上記 4 方向の margin 属性のマージンを結合し、inner Padding と同様のパディングを使用します。

  • 単一値メソッド
  • バイナリメソッド
  • 3値法
  • 4値法

注: CSS では、マージン プロパティに負の値を指定することができます。負のマージン値を指定すると、ボックス全体が指定された負の値の方向とは反対方向に移動し、重なり合う効果が生じます。ボックス。外余白の正負の値を指定することでWebページ内の要素を移動させることができ、CSSレイアウト技術において重要な手法です。

2.6 マージン結合問題

マージンの折りたたみとは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。

要素が別の要素の上に表示される場合、最初の要素の下マージンは 2 番目の要素の上マージンと結合します。以下の写真をご覧ください。

要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上マージンおよび/または下マージンもマージされます。以下の写真をご覧ください。

奇妙に思えるかもしれませんが、マージンはマージン自体と結合することさえあります。

余白のある空の要素があるとしますが、境界線やパディングはないとします。この場合、上下の余白が接触し、結合されます。

このマージンが別の要素のマージンに遭遇すると、マージンも折りたたまれます。

一連の段落要素が占めるスペースがほとんどないのは、すべての余白が結合されて小さな余白が形成されるためです。

マージンの縮小は最初は少し奇妙に見えるかもしれませんが、実際には理にかなっています。いくつかの段落で構成される典型的なテキスト ページを例に考えてみましょう。最初の段落の上のスペースは、段落の上マージンと同じです。マージンが折りたたまれない場合、後続のすべての段落間のマージンは、隣接する上マージンと下マージンの合計になります。これは、段落間にページの上部の 2 倍のスペースがあることを意味します。マージンの崩れが発生した場合、段落間の上下のマージンがマージされ、距離がどこでも一定になるようにします。

**注意:** マージンの折りたたみは、通常のドキュメント フローにおけるブロック ボックスの垂直マージンでのみ発生します。インライン ボックス、フローティング ボックス間のマージン、または絶対位置はマージされません。

2.7 概要

要素の合計幅を計算する式: 要素の合計幅 = 幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー + 左マージン + 右マージン

要素の合計の高さの最終的な計算式: 要素の合計の高さ = 高さ + 上パディング + 下パディング + 上ボーダー + 下ボーダー + 上マージン + 下マージン

マージンまたはパディングの値がパーセンテージに設定されている場合、どの方向であっても、親要素の幅のパーセンテージに基づいて外側のマージンまたは内側のパディングが常に定義されることに注意してください。

2.8 CSS 継承の実施形態:

継承: 特定の祖先要素のスタイル サブクラスは継承できます。

色、フォント シリーズ、テキスト シリーズなど、テキスト関連およびタイポグラフィ関連のスタイルを継承できます。

幅、高さ、マージン、パディング、境界線、背景色などのボックス関連のプロパティおよび背景関連のプロパティは継承できません。

3. ボックスモデルの分類

CSS3box-sizingプロパティを使用すると、指定した領域に収まるように特定の要素を特定の方法で定義できます。プロパティ値は次のとおりです。

• content-box は、ボックス モデルを W3C 標準モデルとして指定します。

  W3C标准盒模型（conten-box值）【width/height被改变，扩展】
  width = content + border + padding;
  

• border-box はボックス モデルを IE モデルとして指定します (奇妙なモード)

  IE怪异盒模型（border-box值）【content被改变，压缩】
  content = width - border - padding;
  

  注: 上記の幅は CSS で設定された要素の幅です。

4. エレメントボックスタイプ

表示属性は、要素が生成するボックスのタイプを指定します。選択されたいくつかの属性値は次のとおりです。

価値	説明
なし	この要素は表示されません。
ブロック	この要素は、前後に改行のあるブロックレベルの要素として表示されます。
列をなして	デフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。
インラインブロック	インラインブロック要素。(CSS2.1の新しい値)
テーブル	この要素は、表の前後に改行が入ったブロックレベルの表 (表に類似) として表示されます。
テーブル行	この要素はテーブルの行として表示されます (tr と同様)。
テーブルセル	この要素は表のセルとして表示されます (td および th と同様)

注: インライン要素のマージンとパディングの上下方向の値は無効です

標準フロー（エレメント配置）におけるボックスの位置決め原理

作成した HTML 構造の順序に従って、要素のデフォルト タイプがブラウザに表示されます。ブロック要素は 1 行を占め、非ブロック要素は左から右に配置されます。

五、可視性と不透明性

Visibility 属性は、要素が表示されるかどうかを指定します。

visibility:visible(默认，元素可见) | hidden(元素不可见)

opacity プロパティは不透明度を指定します。0.0 (完全に透明) から 1.0 (完全に不透明)

インタビューの質問: 要素を非表示に設定する方法

/**/
display: none

/**/
visibility: hidden;

/**/
opacity:0

/**/
height: 0; 
overflow: hidden;

/**/
transform: scale(0); 

/**/
position: absolute;
left: -9999px;