CSSのボックスとはどのようなファイルですか

CSS のボックスは、CSS ボックス モデル、つまりボックス モデルを指します。CSS では、「ボックス モデル」という用語はデザインとレイアウトで使用されます。CSS ボックス モデルは本質的に、周囲の要素をカプセル化するボックスです。 HTML 要素。マージン、ボーダー、パディング、実際のコンテンツが含まれます。

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

チュートリアルの推奨事項: css ビデオ チュートリアル

css のボックスはどのファイルですか?

css のボックスは次のファイルを指します。 CSS ボックス モデル

すべての HTML 要素はボックスとしてみなすことができます。CSS では、「ボックス モデル」という用語がデザインとレイアウトで使用されます。

CSS ボックス モデルは、本質的には、マージン、ボーダー、パディング、実際のコンテンツなどの周囲の HTML 要素をカプセル化するボックスです。

ボックス モデルを使用すると、他の要素と周囲の要素の境界線の間のスペースに要素を配置できます。

次の図はボックス モデルを示しています:

さまざまな部分の説明:

マージン (マージン) - 境界線の外側の領域がクリアされ、余白が透明になります。

境界線 (境界線) - パディングの周囲とコンテンツの外側の境界線。

Padding (パディング) - コンテンツの周囲の領域をクリアし、パディングを透明にします。

コンテンツ (コンテンツ) - ボックスのコンテンツであり、テキストと画像が表示されます。

すべてのブラウザで要素の幅と高さを正しく設定するには、ボックス モデルがどのように機能するかを知る必要があります。

要素の幅と高さ

注 重要: CSS 要素の幅と高さのプロパティを指定すると、コンテンツ領域の幅と高さのみが設定されます。 。要素を完全なサイズにするには、パディング、境界線、およびマージンも追加する必要があることに注意してください。 .

次の例の要素の合計幅は 300px です:

例

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

実行結果:

自分で計算してみましょう:

300px (幅)

50px (左右のパディング)

50px (左右の境界線)

50px (左右の余白)

= 450px

想像してみてください、スペースは 250 ピクセルしかありません。要素の合計幅を 250 ピクセルに設定しましょう:

例

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

実行効果:

最後の要素の合計幅の計算式は次のようになります。

要素の幅の合計 = 幅の左のパディング、右のパディング、左の境界線、右の境界線、左のマージン、右のマージン

要素の合計高さの最終的な計算式は次のようになります。

要素の高さの合計 = 高さ 上のパディング、下のパディング、上の境界線、下の境界線、上のマージン、下のマージン

ブラウザの互換性の問題

適切な設定が設定されたらページ DTD の場合、ほとんどのブラウザーは上記のようにコンテンツをレンダリングします。ただし、IE 5 および 6 でのレンダリングは正しくありません。 W3C 仕様によれば、要素のコンテンツが占めるスペースは width 属性によって設定され、コンテンツの周囲のパディングとボーダーの値は個別に計算されます。残念ながら、IE5.X と 6 は独自の非標準モデルを奇妙なモードで使用します。これらのブラウザの width プロパティは、コンテンツの幅ではなく、コンテンツ、パディング、境界線の幅の合計です。

ただし、この問題を解決する方法はあります。しかし、現時点での最善の解決策は、問題を回避することです。つまり、指定された幅のパディングを要素に追加する代わりに、要素の親要素と子要素にパディングまたはマージンを追加してみてください。

IE8 およびそれ以前の IE バージョンは、パディング幅および境界線幅属性の設定をサポートしていません。

IE8 以前のバージョンの非互換性の問題を解決するには、HTML ページで を宣言できます。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上がCSSのボックスとはどのようなファイルですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。