div+cssボックスモデルの知識のまとめ、div+cssレイアウトを簡単にマスター

友達が初めて CSS を学んだとき、CSS の基本、つまり内側のマージン、ボーダー、外側のマージンを初めて学んだときに、パディング、ボーダー、マージンを学んだはずです。それらは最も単純な箱を形成します。一般に、Web ページの先頭に doctype 宣言を追加する、標準の w3c ボックス モデルが使用されます。 doctype 宣言が追加されたため、すべてのブラウザは標準の w3c ボックス モデルを使用してボックスを解釈し、Web ページは各ブラウザで一貫して表示されます。ブラウザの互換性は非常にフレンドリーです。ここではボックスモデルに関する関連知識をまとめていきます。 boxボックスモデルを学習するための関連チュートリアル1。

2. 「企業 Web サイトの包括的なレイアウトに関する実践的なビデオ チュートリアル」で ボックス モデル の実践コースを学習します

ボックスモデルに関する知識 CSS 定義では次のようなボックスが記述されています: its 外側のマージンと上部の間の距離は 3 ピクセル、外側のマージンと左右の部分の間の距離は 5 ピクセル、そして外側のマージンと下端の間の距離は 6 ピクセルです。 境界線の幅は 6 ピクセルで、境界線の色は黒です。 パディングと上下の境界線の間の距離は 4 ピクセルです。左右の境界線は 6 ピクセルです。

2. CSS ボックス モデルの知識の概要: ボックス モデル、要素コンテンツ、パディング、これらの 4 つのコンポーネントには、上/右/下/左が含まれます。 ページに要素を配置するときは、宣言されたすべてのパディング、ボーダー、マージンの値をコンテンツ領域に追加します。もちろん、要素にパディング、境界線、またはマージンがない場合、そのサイズはその内容によってのみ決まります。

3.

CSSボックスモデルを画像とテキストで詳しく解説

CSSボックスモデルは、CSSの比較的中心的な概念です。 Web ページでは、Web ページのすべての要素をボックスとして考えることができます。ボックスは、マージン、境界線、内側のマージン、およびコンテンツの 4 つの部分で構成されます。このうち、マージン、ボーダー、パディングは、要素の上下左右の辺、または個々の辺に適用できます。特に、マージンは負の値に設定することもできます。場合によっては、マージンに負の値が必要になることがあります。

4.CSS ボックス モデルの紹介

Web デザインでよく聞く属性名: content、padding、border、margin ですが、これらはすべて CSS ボックス モデルのこれらのプロパティで使用できます。これらの性質は私たちが日常生活で使用する箱と同じです。内容物とは箱の中にあるものであり、詰め物とは箱の中身を傷つけないように追加する耐震材料のことであり、枠とは箱自体に一定の隙間を設けることを意味します。通気性を維持するためにボックスの間にあります。

関連Q&A

1. ボックスモデルについて質問したいですか？

2. ボックスモデルについてまだ少し理解できていないので、アドバイスをいただけますか?

3. ボックスモデルの境界がまだわかりません?

[関連する推奨事項]

1. PHP 中国語 Web サイトの無料チュートリアル:

「クイックプレイ CSS3 チュートリアル」

以上がdiv+cssボックスモデルの知識のまとめ、div+cssレイアウトを簡単にマスターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。