JQueryはCSSボックスモデル(Box Model)を決定します

フロントエンド設定を行ったことがある人なら誰でも、CSS には 2 つの ボックス モデル、W3C 標準ボックス モデルと IE ブラウザ ボックス モデルがあることを知っています。 IE を除くほとんどのブラウザは、W3C ボックス モデルのみをサポートします。 IE ブラウザは、ページのレンダリング モードの定義に従って、対応するボックス モードを使用できます。どのレンダリング モードが使用されるかは、ページの DOCTYPE 宣言によって異なります。

ページに有効な DOCTYPE 宣言が含まれている場合、ページは厳密モードで表示されます。

ページに DOCTYPE 宣言がない場合、または有効な DOCTYPE 宣言がない場合は、互換モードで表示されます。

2 つのモードの違いは次のとおりです。 2 つのレンダリング モードの主な違いは、要素の幅と高さのスタイルの計算です。次のようなスタイル

{

width:180px;

height:72px; モードでは、要素の内容は 180*72px になります。

パディング

と境界線が 180*72 ピクセルの範囲外です。したがって、要素全体のカバー範囲は、幅:180 + 10*2 + 5*2 = 210px、高さ:72 +10*2 + 5*2 =102px となります。 IEの互換モードでは、要素全体のカバーエリアは180*72ピクセルです。コンテンツのサイズは、幅 180 - 10*2 - 5*2=150px、高さ 72 - 10*2 - 5*2 =32px に縮小されます。

Box Modalを判定するのに

JQuery

を使うのはとても簡単です。これには、bool 型の $.boxModel フラグが渡されます。ページが W3C 標準モデルを使用している場合は true を返し、それ以外の場合は false を返します。

以上がJQueryはCSSボックスモデル(Box Model)を決定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。