ホームページ > 記事 > ウェブフロントエンド > JQueryはCSSボックスモデル(Box Model)を決定します
JQueryはCSSボックスモデル(Box Model)を決定します
- 巴扎黑オリジナル
- 2017-07-08 11:09:041250ブラウズ
フロントエンド設定を行ったことがある人なら誰でも、CSS には 2 つの ボックス モデル、W3C 標準ボックス モデルと IE ブラウザ ボックス モデルがあることを知っています。 IE を除くほとんどのブラウザは、W3C ボックス モデルのみをサポートします。 IE ブラウザは、ページのレンダリング モードの定義に従って、対応するボックス モードを使用できます。どのレンダリング モードが使用されるかは、ページの DOCTYPE 宣言によって異なります。
ページに有効な DOCTYPE 宣言が含まれている場合、ページは厳密モードで表示されます。
ページに DOCTYPE 宣言がない場合、または有効な DOCTYPE 宣言がない場合は、互換モードで表示されます。
2 つのモードの違いは次のとおりです。 2 つのレンダリング モードの主な違いは、要素の幅と高さのスタイルの計算です。たとえば、次のスタイル
のコードは次のとおりです:
{
width:180px;
height:72px;
padding
:10px;
bording-width:5px;
}
W3Cの厳密モードでは、要素のコンテンツ表示範囲は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 サイトの他の関連記事を参照してください。