css3 の 2 つのボックスモデルの違いは何ですか-フロントエンドQ&A-php.cn

css3 の 2 つのボックスモデルの違いは何ですか

青灯夜游

リリース： 2022-02-28 14:10:59

オリジナル

3698 人が閲覧しました

違い: 1. 標準ボックスの幅と高さはコンテンツ領域の幅と高さですが、奇妙なモデルの幅と高さは「コンテンツ領域の境界パディング」の幅と高さを参照します。 "; 2. 標準ボックスはコンテンツ領域を拡大します余白、境界線、余白は要素のサイズに影響を与えませんが、奇妙なモデルは影響します。

css3 の 2 つのボックスモデルの違いは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

ボックスモデルには、コンテンツ (コンテンツ)、パディング (内側のマージン)、ボーダー (境界線)、およびマージン (外側のマージン) が含まれます。

CSS には 2 つのボックスモデルがあります。つまり、 W3C 標準モデル と IE 奇妙なモデル 。

概要:

<!DOCTYPE html>  
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

ログイン後にコピー

ドキュメントの解析タイプを宣言します。したがって、それがどれほど重要であるかを示します。
解析タイプ:
BackCompat: 奇妙なモード、ブラウザ独自のモード
CSS1Compat: 標準モード、W3C 標準の解析およびレンダリングページ
宣言が行われていない場合は、奇妙なモードに従ってレンダリングされます。ブラウザごとにレンダリング方法が異なります

1. 標準モデル

W3C 標準モデル

要素の幅と高さを設定する場合標準のボックスモデルはコンテンツ (青い部分) の幅と高さのみを設定します。この要素の実際の幅と高さには、パディング (内側のマージン)、ボーダー (境界線)、およびマージン (外側のマージン) も含まれます。。

式:

#width = コンテンツの幅
height = コンテンツの高さ

2. 奇妙なモデル

奇妙なモデル

要素の幅と幅を設定するとき奇妙なボックスモデルは、ボックス全体を全体として扱います。ボックス全体に幅と高さを与えます。ボックスに追加のマージンと境界線も設定した場合。すると、真ん中の内容の青い部分が絞られて小さくなります。

式:

width = ボーダーパディングコンテンツの幅
height = ボーダーパディングコンテンツの高さ

W3C 標準モデルと IE 変型モデルの主な違いは、ボックスの幅と高さです。

①標準ボックスの幅と高さは、コンテンツの幅と高さを表します。幅=コンテンツの幅、高さ=コンテンツの高さです。内側のマージン、境界線、外側のマージンを増やすと、コンテンツ領域のサイズには影響しませんが、要素ボックス全体のサイズが増加します。

②奇妙なボックスの幅には、パディング、コンテンツの幅、境界線が含まれます。 height には、コンテンツの高さ、境界線、およびパディングが含まれます。

width=(border-left padding-left コンテンツのパディング右幅、右境界線)

height=(border-top padding-コンテンツの上部の高さ (パディング - 下部の境界線 - 下部)

#概要: #1. 標準ボックスモデル: コンテンツのサイズのみを設定します。コンテンツ。 IE ボックスモデル: 要素全体をセット全体のサイズとして扱います。

2. CSSのボックスモデルは、コンテンツ、パディング、ボーダー、マージンで構成されます。ただし、ボックスのサイズは、マージンを追加せずに、コンテンツのパディングと境界部分によって決まります。

3. ページコードを記述するときは、同じページ上の複数のブラウザーの非互換性を避けるために、標準の W3C モデル (DOCTYPE タイプをページ内で宣言する必要があります) を使用するように努める必要があります。

DOCTYPE タイプが宣言されていない場合、IE ブラウザはボックスモデルを IE ボックスモデルとして解釈し、FireFox はそれを W3C ボックスモデルとして解釈するため、DOCTYPE タイプがページ内で宣言されている場合、すべてのブラウザは、ボックスモデルを W3C ボックスモデルとして解釈します。

(学習ビデオ共有:

css ビデオチュートリアル

、Web フロントエンド )

以上がcss3 の 2 つのボックスモデルの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。