CSS ボックス モデルについて簡単に説明しますか? CSSボックスモデルの紹介

この記事の内容は、CSS ボックス モデルの理解について簡単に説明することです。 CSSボックスモデルの紹介。困っている友人は参考にしていただければ幸いです。

Web ページの構築は、ボックス モデルの積み重ねから切り離せません。 CSS モデルは Web の基礎であると言うべきですが、最終的な効果の違いは、高さと幅、コンテンツと背景の削除の違いにすぎません。

それでは、CSS モデルについて何を知っていますか?

まず、CSSボックスモデルは何種類あるのでしょうか？ 2種類。

1. 標準モデル 2. IE モデル

まず、これら 2 つのボックス モデルの違いについて説明します。

標準モデルと IE モデルの最大の違いは、計算方法の違いです。標準ボックス モデルの高さと幅は、コンテンツの高さと幅です。 IE モデルの高さと幅の計算には、パディングとボーダーの幅と高さが含まれます。セットアップ時に、ボックスのサイズを設定することで 2 つを区別できます。

box-sizing の値

content-box: 標準ボックス モデル。

ボーダーボックス: IE ボックス モデル。

それでは、IE ボックス モデルをいつ使用する必要があるのでしょうか?著者の感情は多くの場所で使用されていませんが、それが非常に必要な状況が 1 つあります。要素をホバーに設定し、それに境界線を追加する場合、このときに標準のボックス モデルを使用すると、

要素が 1px の境界線に押し込まれてスタイルが混乱します。見苦しい。ただし、box-sizing:border-box を設定すると、この問題をうまく解決できます。

第二に、js を使用して要素の幅と高さを取得するにはどうすればよいでしょうか?

まずメソッドを説明してから、違いについて説明します。

document.getElementById('id').style.width/height: 幅と高さを取得するためのインライン スタイルの取得にのみ限定されます。

document.getElementById('id').currentStyle.width/height: ブラウザーが時間内にレンダリングした後に幅と高さを取得できます。このメソッドはより正確ですが、IE のみをサポートします。 (正確である必要があり、誰でも以下のメソッドを使用できます)

window.getComputedStyle(dom).width/height: このメソッドは、chrome および Firefox ブラウザと互換性があります。

document.getElementById('id').getBoundingClientRect().width/height: このメソッドは、時間内に要素の幅と高さを取得し、要素の絶対位置を計算して上部を取得することもできます。左、幅同時に、高さの 4 つの値。

CSS ボックス モデルに関しては、BFC (ブロックレベルの書式設定コンテキスト) の概念を導入する必要があります。コンテンツのこの部分については、オンラインでさらに詳しく説明されています。はい、簡単に説明します。

BFC の原理

1. BFC 要素の垂直方向のマージンは重なり合います。

2. BFC エリアはフローティング要素の BOX と重なりません。

3. BFC は独立したコンテナであり、外部要素は内部の要素に影響を与えません。

4. BFC の高さを計算するとき、浮動要素も計算に参加します。

BFC の作成方法

1. オーバーフロー: 非表示、自動;

2. float の値は none ではありません。

3. 位置の値は、デフォルトまたは実際の

以上がCSS ボックス モデルについて簡単に説明しますか? CSSボックスモデルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。