ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3 の 2 つのボックス モデルの違いは何ですか
css3 の 2 つのボックス モデルの違いは何ですか
- 青灯夜游オリジナル
- 2022-02-28 14:10:593712ブラウズ
違い: 1. 標準ボックスの幅と高さはコンテンツ領域の幅と高さですが、奇妙なモデルの幅と高さは「コンテンツ領域の境界パディング」の幅と高さを参照します。 "; 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>8b05045a5be5764f313ed5b9168a17e6 ドキュメントの解析タイプを宣言します。したがって、それがどれほど重要であるかを示します。
解析タイプ:
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 サイトの他の関連記事を参照してください。