箱の箱モデル:ボックス😅"

あなたが理解する必要がある最初のことは、Webページ上で見るすべては、長方形の箱で構成されています.
ウェブサイトでは、すべてのコンテンツを参照してくださいボックスの組み合わせは、上に配置するには、次の、下、またはお互いに入れ子に配置されます.
ヘッダー、nav、フッターすべてのボックスで構成されます.通常、長方形のボックスの代わりにHTML要素と呼びました.

𝘉𝘰𝘹𝘦𝘴 - 𝘉𝘰𝘹𝘦𝘴 𝘳𝘦𝘤𝘵𝘢𝘯𝘨𝘶𝘭𝘢𝘳 𝘉𝘰𝘹𝘦𝘴 𝘌𝘷𝘦𝘳𝘺𝘸𝘩𝘦𝘳𝘦 😅

下を見る👇

すべての箱を見るために私によって加えられるコード👇

* {
 outline: 2px solid #ffb400 !important;
}

CSSでボックスモデルは何ですか?
HTML要素を作成するときはいつでも、それは箱の中で包まれます、そして、我々はCSSを使ってそれを修正することができます.
このボックスは、マージン、パディング、ボーダー、およびコンテンツなどのいくつかの異なる層で構築されています.
そして、CSSの助けを借りて、我々は、サイズ、位置、およびこれらのボックスのプロパティを操作することができます.
これは、Webページのデザインと構造を開発するために使用されます.

ボックスモデルの階層

のコンテンツエリア

パディング

ボーダー

のマージン

ボックスモデルの各層について話しましょう.

✔ コンテンツエリア:-
コンテンツエリアには、テキスト、イメージなどのHTML要素内に含まれる実際のコンテンツが含まれます.
widthおよびheightプロパティは、コンテンツボックスの幅と高さを定義します.

また、コンテンツの幅と高さを定義できます.
max width、min width、max height、min heightは制約を設定します.
我々は高さと幅を定義しなかった場合、それはコンテンツに基づいて計算されますが、我々はまた、指定されたプロパティと固定の高さと幅を設定するオプションがあります.
下を見る👇


出力


✔ パディング
CSSのパディングは、境界線と要素内容の間のスペースを指します.
上部、右、下、左にパディングを設定します.我々は、プロパティなど
パディングトップ右パディング

下の

を埋めている

パディングショート関数は、1つの宣言で要素のすべての4つの辺を定義します.

p {
   padding:20px;
}

✔ ボーダー
CSSの境界は、ボックスモデルのマージンとパディングコンポーネントの間にあります.
通常、我々はこのようなボタンの周りの境界線を見ます👇

border shortプロパティには三つの入力があります.

- border size
- border-style : solid/ dashed
- border-color

button {
     border: 2px solid #ffb400;
}

ボーダースタイルのリスト👇


マハッシュ👽

✨ ボーダースタイル
午前5時30分

✔ 余白
マージンはボックスと周囲の箱の間のスペースだけです.
右上、下、左にマージンを設定します.我々は、プロパティなど

のマージントップ

マージン権利

マージンボトム

マージンは、

を残しました

マージン短縮は、1つの宣言で要素のすべての4つの辺を定義します.

div {
  margin: 30px;
}

ボックスのサイズは次のように計算されます.
𝐓𝐨𝐭𝐚𝐥 𝐖𝐢𝐝𝐭𝐡 = 幅+パディング左+右+左+ボーダーの権利を右詰め.
𝐓𝐨𝐭𝐚𝐥 𝐇𝐞𝐢𝐠𝐡𝐭 = 高さ+パディングトップス+底+ボーダートップ+ボーダー底.
既定のボックスモデルでは、幅や高さの幅や高さを計算する方法では、合計幅と高さのパディングや境界線も追加されるので、多くの問題が追加されます.
🤜 この問題を解決するために別のプロパティをボックスサイジングとして知られて導入されました.

ボックスサイジングとは何か
CSSボックスのサイズ設定は、HTML要素の幅と高さを計算する方法を設定します.
値を指定できます

のコンテンツボックス

ボーダーボックス

✔ コンテンツボックス
コンテンツボックスを追加することで、ボックスのサイズ変更のプロパティの既定の動作です.
幅、パディング、およびこのような境界線を設定する場合👇


✔ ボーダーボックス
ボーダーボックスは最良の選択です、それはパディングとボーダーを加えるために内容箱が縮小すると言います.
あなたが300 px幅を箱と20 pxパディングと3 px境界に加えるならば.
コンテンツボックスがパディングとボーダーを加えるために縮小するので、これのすべては300になります.

𝐓𝐢𝐩: ボーダーボックスはレイアウトを設計し、HTML要素のサイズを管理するための最良の選択です.
個別にこのプロパティを設定する必要はありません.
ボックスサイジングリセット方法

html {
   box-sizing: border-box;
}

*, *::before, *::after {
   box-sizing: inherit;
}

あなたが遺産とグローバルリセットに慣れていないならば、
それから、上記のコードを理解するために、このブログから参照をとってください.
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
😍 我々は十分な理論を学んだ.
コード内の両方の要素のサイズの違い、および要素の検査後に注意してください.
コディン👇

キーポイント

は常に境界ボックスを好む.

ブラウザーツールを使用して、要素の正確に計算されたサイズを確認します.

は使いやすさのためにグローバルリセットを使用します.

結論
OK、それは、我々はボックスモデルのすべての最も重要な部分をカバーした.😍
停止し、これらのリソースをチェックするためのおかげで、私はそれがある時点であなたを助けるつもりだと確信しています.
あなたが読書を楽しんでいるならば、他のDEVSも😇.
私とつながりましょう