バックエンドプログラマのためのフロントエンドへの道 05 ボックスの詳細説明 model_html/css_WEB-ITnose

ディレクトリ

イラスト

ボックスモデルサイズベンチマーク

ブラウザの開発者ツールを使用して要素の高さ（幅）を表示するときに発生する問題

1.

説明: 内側から外側に向かって、content、padding (内側のマージン)、border (境界線)、margin (外側のマージン) です。

例: 宅配トラックにはたくさんの速達パッケージ (箱に詰められた) があり、それぞれのパッケージには異なるものが含まれています。

コンテンツ: 実際に他のものを収容する領域。たとえば、宅配トラックの中身はそれらの荷物が置かれているスペースであり、各荷物の中身はそれらの荷物が置かれているスペースです。 Ten コンテンツには他の要素、テキスト、画像などを配置できます。

border: ボックスの境界線。例えば、特急トラックの鉄板や外箱。

枠線の色、太さ（幅）、スタイルなどを指定できます。

パディング: コンテンツと境界線の間の距離。

マージン: パッケージ間の距離。それらは互いに重なり合う可能性があるため、この距離は負の値になる可能性があります。 注: 各ブラウザは、要素のマージンとパディングの値を異なる値で初期化します。

したがって、スタイルを記述するたびに、ページに含まれる要素を初期化する必要があります

。

/* 将当前页面内涉及的元素表签列出来 */body,div,span{ margin:0px; padding:0px;}

2. ボックスモデルのサイズベンチマーク

デフォルトでは、要素の幅と高さが設定されています。実際には、コンテンツの幅と高さが設定されています。

Q: この要素の実際の幅と高さはどれくらいですか?

A: 実際の幅 = 左マージン + 左ボーダー + 左パディング + コンテンツ + 右パディング + 右ボーダー + フレンドのマージン; 実際の高さは同じです。

Q: そこで質問ですが、要素の実際の高さを直接設定したい場合はどうすればよいですか?

A: CSS3 は、この問題を解決するために新しい属性 box-sizing を追加しました。これには、content-box、border-box、inherit の 3 つの値があります。

コンテンツボックス: これは通常のデフォルトの状況であり、コンテンツの高さと幅を指します。

ボーダーボックス: 文字通りの意味は難しくありませんが、境界線 (境界線を含む) 内の高さと幅を指します。

スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー スルー‐‐'‐‐‐‐‐‐‐‐‐ - _inherit まで: 親要素から box-sizing 属性の値を継承します。

3. ブラウザの開発者ツールを使用して要素の高さ (幅) を確認するときに発生する問題

Google Chrome の要素レビュー機能を使用すると、機能的に現在の要素の高さ (幅) 高さを確認するプロンプトが表示されます。幅。しかし、要素の実際の高さと幅を計算したところ、要求された情報と一致しないことが判明しました。

すごい

計算すると、div の実際の幅 = 10 + 1 + 20 + 200 + 20 + 1 + 10 = 262px 開発者ツールで表示される結果は 242px で、これは 20px 悪くなります。

さまざまなパラメータを調整することで、最終的な結論は次のようになります:

レビュー要素の計算結果にはマージン値は含まれません。