ホームページ >ウェブフロントエンド >フロントエンドQ&A >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 サイトの他の関連記事を参照してください。