CSS についてどのくらい知っていますか (7) --box model_html/css_WEB-ITnose

1. はじめに

このセクションから、このシリーズの第 3 部に入ります??CSS プレゼンテーション。このセクションでは、ページ上の CSS のいくつかのレイアウトおよびレンダリング機能について説明します。テキストとブロックの 2 つのカテゴリが含まれます。

最初のカテゴリ??テキスト。この部分は文字サイズ、フォント、色、背景色、太字にするかどうかなどの設定など比較的簡単です。重要な点は、フォントの設定、行の高さの設定、およびテキスト関連の距離はすべて相対値を使用することです。これらのことは、「CSS についてどれくらい知っていますか (4)?? ブラウザーのデフォルト スタイルの解釈」のセクションで説明されています。もう 1 つの重要な点は、Web 上で最も人気のあるフォント ライブラリである fontAwesome です。これについては、「Web ページ上の小さなアイコンを置き換えるには fontAwesome を使用してください」を参照してください。

2 番目のタイプのブロック。この部分には多くの知識ポイントがありますが、重要なものは、ボックス モデル、フロート、位置、表示です。この記事ではボックスモデルについて説明し、以降の記事でその他の内容を順次紹介していきます。

2. 「ボックス」とは何ですか

「ボックス」と言えば、数年前、私がまだ大学生だった頃、大学で「ボックスモデル」について質問されたのを今でも覚えています。時間。寮に戻って慌ててネットで調べてみると、マージン、パディング、ボーダーのことは昔から知っていたのですが、「ボックス」という言葉すら知りませんでした。 ??したがって、オンラインで見つけられるコード スニペットやヒントに満足するだけでなく、いくつかの知識システムを包括的に理解してください。もちろん、ボックスモデルはマージン、パディング、ボーダーだけではなく、他の知識も含まれることを後で知りました。

ここで余談ですが、私も最近考えていることです。私は次のように考えています。Web フロントエンドはどのような知識システム アーキテクチャを持つべきでしょうか?以前は、W3C をアウトラインとして使用でき、W3C の内容を学習すれば十分だと考えていました。後で、私が間違っていたことが分かりました。W3C はまだ包括的ではありませんでした。

Web フロントエンドのナレッジ システムを真に包括的にカバーするのはブラウザ カーネルです。これは、ブラウザ カーネルを詳細に理解してブラウザを構築する必要があるという意味ではありません。ブラウザは、Web フロントエンド コードが実行されるプラットフォームです。ブラウザ カーネルにどのようなモジュールがあるかを知る必要があります。詳細についてはまだ説明しませんが、機会があれば後で共有します。

ここでは初心者を大事にします。 CSS を初めて使用する友人は、CSS の基本、つまり内側のマージン、ボーダー、外側のマージンを初めて学んだときに、パディング、ボーダー、マージンを学んだはずです。 3人で「箱」を形成します。宅配便と同じように、もともと小さなiPhoneを購入したのですが、届いたものは本当に大きな箱でした。白いiPhoneボックスとiPhone本体の間にはスペーサー層（内側のマージン）があるため、白いiPhoneボックスは非常に薄いですが（境界線）フォームボードの層（外側のマージン）もあります。ボックスとエクスプレスボックス。これは典型的なボックスです。

上の図に示すように、実際の内容はこれらの単語です。テキストの周囲に 10px の内側の余白、5px の境界線、10px の外側の余白があります。箱が見えますか？

3. ボックスの幅

3.1. 固定幅が設定されている場合

この問題が発生した場合は、さまざまな情報をクエリする前に、自分で実験することをお勧めします:

上記のように、Web ページを取得します。その結果、スクリーンショット ツールを使用してテキスト コンテンツの幅を測定できます。テキスト コンテンツの幅がちょうど 300px であることがわかり、これは設定した幅です。

したがって、ボックス モデルで設定する幅は、ボックス全体の幅ではなく、コンテンツの幅です。ボックス全体の幅は、(コンテンツの幅 + 境界線の幅 + パディングの幅 + マージンの幅) の合計です。このように、4 つのうちの 1 つを変更すると、ボックスの幅が変わります。これは私たちにとって友好的ではありません。

関係ありません、この不親切なことはずっと前に誰かによって発見され、解決されました。以下でそれについて話しましょう。

3.2. 親コンテナがいっぱいになったとき

デフォルトでは、div の display:block 幅は親コンテナ全体を埋めます。以下に示すように:

ただし、この div はボックス モデルであり、その幅全体には (コンテンツの幅 + 境界線の幅 + パディングの幅 + マージンの幅) が含まれており、幅全体が親コンテナーに収まることを忘れないでください。

それが問題だ。親コンテナの幅が変更されていない場合、マージン、ボーダー、またはパディングのいずれかの幅の値を手動で増やすと、コンテンツの幅が減少します。極端なケースでは、コンテンツの幅がそれ以上圧縮できない点 (単語の幅など) まで圧縮されると、ブラウザは親コンテナの幅を強制的に広げます。これは私たちが見たいものではありません。

3.3. コンテンツをラッピングする場合

この場合、コンテンツの幅は (パディング幅 + ボーダーの合計) だけ増加します。幅 + マージン幅) はコンテンツの幅に基づきます。

4. ボックスの幅を見てください

前述したように、ボックスモデルの幅を設定すると、コンテンツの幅が設定されるだけとなり、無理があります。この問題を解決するにはどうすればよいでしょうか?答えは、 box-sizing:border-box

上の図に示すように、div に box-sizing:border-box を設定すると、幅 300px はコンテンツ + 境界線 + 境界線 (マージンを除く) の幅となり、実際の幅とより一致します。要件。

システムの CSS を記述するときは、最初のスタイルを次のようにすることをお勧めします。

有名なブートストラップでも、* セレクターに box-sizing:border-box を追加します。これを実行してみてはいかがでしょうか。

5. 垂直マージンのオーバーラップ

ここでマージンについて言及するときは、このマージンの特徴である垂直マージンについて言及する必要があります。下の図に示すように、

の垂直方向のマージンは 16px なので、2 つの

間の垂直方向の距離はどれくらいでしょうか?

常識的には 16 + 16 = 32px になるはずですが、答えはやはり 16px です。垂直方向のマージンが重なるため、大きいマージンが小さいマージンを「食べて」しまいます (自分で実験できます)。

6. div を使用して「三角形」を描画します

「三角形」は、Baidu ホームページなどの日常の Web ページで非常に一般的です:

や私のオープンソース プロジェクト wangEditor (http://www.cnblogs.com/) wangfupeng1988/p/4198428.html) のページ効果:

もちろん、背景画像と fontAwesome を使用してこの効果を実現できますが、div を使用してこの効果を実現することもできます。非常にシンプルで、普遍的にカプセル化できます。 . :

7. まとめ

このセクションでは、ボックス モデルの関連知識について説明することに多くの時間を費やしましたが、CSS を体系的に学習したことがない経験豊富な開発者に適しています。同文: 誰もが知識体系を体系的に学ぶことをお勧めします。

次に、このパートの続きで、もう一度 float について話します。

------------------------------------------------ -------------------------------------------------- -----------

私のチュートリアルへようこそ: 「デザインからパターンまで」「 JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft petshop4.0 ソース コード解釈ビデオ」 ""json2 .js ソース コード解釈ビデオ》

私のオープンソース プロジェクトのフォローも歓迎します??wangEditor、シンプルで使いやすい Web リッチ テキスト エディター

---------- -------- -------------------------------------- -------- --------------------------------------