ボックスの理解 model_html/css_WEB-ITnose

概要

• Web デザインでよく聞く属性名: content、padding、border、margin、CSS ボックス モデルにはすべてこれらのプロパティがあり、主に次のようなプロパティがあります。プロパティ。

• 私たちが日常生活で目にする箱も、これらの性質を持った物を入れることができる箱です。 、ボックスモデルと呼ばれます。

• CSSボックスモデルとは、Webデザインでよく使われるCSS技術で使われる思考モデルです。

• ボックス モデルは CSS の重要な概念であり、ボックス モデルを理解することによってのみ、より適切に入力することができます。実際、ボックス モデルには ie ボックス モデルと標準の w3c ボックス モデルの 2 種類があります。ボックスモデルの解釈はさまざまです。

標準ボックス モデル

上の図からわかるように、標準 w3c ボックス モデルのスコープにはマージン、ボーダー、パディング、コンテンツが含まれます、コンテンツ部分には他の部分は含まれません。

IE ボックス モデル

上の図からわかるように、IE ボックス モデルのスコープにはマージン、ボーダー、パディング、コンテンツも含まれます。標準の w3c ボックス モデル: IE ボックス モデルのコンテンツ部分にはボーダーとパディングが含まれます。

例: ボックスのマージンが 20px、境界線が 1px、パディングが 10px、コンテンツの幅が 200px、高さが 50px の場合、標準の w3c ボックス モデルが次のとおりです。それを解釈するために使用されるため、このボックスが占める必要があります。位置は幅 20 2+1 2+10 2+200=262px、高さ 20 2+1 2 10 2+50=112px、ボックスの実際のサイズは次のとおりです。幅 1 2+10 2+200=222px、高さ 1 2 +10 2+50=72px; IE ボックス モデルを使用する場合、ボックスが占める必要がある位置は次のとおりです: 幅 20 2+200=240px、高さ 20 *2+50=70px、ボックスの実際のサイズは幅200px、高さ50pxです。

CSS では、幅と高さはコンテンツ領域の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。

1、提示：背景应用于由内容和内边距、边框组成的区域。2、提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。3、提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

ブラウザの互換性

ページに適切な DTD が設定されると、ほとんどのブラウザは上記のようにコンテンツをレンダリングします。ただし、IE 5 および 6 でのレンダリングは正しくありません。 W3C 仕様によれば、要素のコンテンツが占めるスペースは width 属性によって設定され、コンテンツの周囲のパディングとボーダーの値は個別に計算されます。残念ながら、IE5.X および 6 は独自の非標準モデルを奇妙なモードで使用します。これらのブラウザの width プロパティは、コンテンツの幅ではなく、コンテンツ、パディング、境界線の幅の合計です。ただし、これを回避する方法はあります。しかし、現時点での最善の解決策は、問題を回避することです。つまり、指定された幅のパディングを要素に追加する代わりに、要素の親要素と子要素にパディングまたはマージンを追加してみてください。

それでは、開発時にはどのボックスモデルを選択すべきでしょうか?

間違いなく「標準の w3c ボックス モデル」です。 「標準 w3c ボックス モデル」を選択することは何を意味しますか?これは非常に簡単で、Web ページの先頭に doctype 宣言を追加するだけです。 doctype ステートメントを追加しない場合、各ブラウザは独自の動作に従って Web ページを理解します。つまり、IE ブラウザは IE ボックス モデルを使用してボックスを解釈し、FF は標準の w3c ボックス モデルを使用して解釈します。したがって、Web ページはブラウザーごとに異なって表示されます。逆に、doctype 宣言を追加すると、すべてのブラウザーは標準の w3c ボックス モデルを使用してボックスを解釈し、Web ページは各ブラウザーで一貫して表示されます。

そこで、Web ページをさまざまなブラウザと互換性を持たせるために、標準の w3c ボックス モデルを使用しましょう。

CSS3 ボックス サイズ プロパティ

定義と使用法

ボックス サイズ プロパティを使用すると、特定の領域に特定の方法で一致する特定の要素を定義できます。

box-sizing には 2 つの値があり、1 つは content-box で、もう 1 つは border-box です。

box-sizing:content-box に設定すると、*標準モード* の解析と計算が使用されます。これはデフォルトのモードでもあります。

box-sizing:border- に設定すると、ボックス、計算を分析するために *奇妙なモード* を使用します;

現在この属性を使用するには、次の接頭辞が必要です:

-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box|border-box|inherit;

たとえば、2 つの枠線付きボックスを配置する必要がある場合並べて、 Set box-sizing を "border-box" に渡すことができます。これにより、ブラウザは指定された幅と高さのボックスを 変なモード でレンダリングし、ボックスに境界線とパディングを挿入します。