フロントエンドの基本??CSS+DIV レイアウト_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ランダムに Web ページを開いて F12 を押すと、多数の高密度の「DIV」が表示されます。そのとおり、現在、ほとんどの Web ページでは CSS+DIV レイアウト方法が使用されています。

前回の記事ではボックスモデルについて説明しましたが、ここではボックスモデルを基礎として、一般的に使用される Web ページのレイアウト方法である CSS+DIV レイアウトを簡単に理解します。

CSS+DIV レイアウトは、

タグを使用してページ全体をいくつかのブロックに分割し、各

ブロック上で CSS の配置を実行し、最後に対応するコンテンツを各ブロックに追加します。

これは、最初に Web ページ全体のフレームワークを構築し、次にパーツを個別に調整するようなものです。ここで、

はフレームの構築を担当し、CSS は構築に相当します。ルール、特定のルール (ビジネス要件など) に従って鉄筋を溶接します。

1. 材料を選択するときは、使用する鋼棒を理解する必要があります理解することは DIV を理解することです

：「ボックスモデルって何ですか？DIVですか？」私の意見では、Web ページには p、h1、form、div、span、table、tr、td などの多くの要素が表示されます。それらにはすべてマージン、ボーダーがあります。、パディング属性。

ただ、Web ページ全体のレイアウトを構築するときは、一般に、上記の例の「補強バー」として DIV を使用します。

ボックスモデルは DIV+CSS の基礎であり鍵です。簡単に言うと、ボックスモデルの中心となるのは、これらの「ボックス」のマージン、ボーダー、パディング属性です。これは、合理的で美しい Web ページをレイアウトしたい場合の基本的なスキルです。

2. 材料を切断して溶接します

2. マテリアルを切断して溶接します (CSS を使用して、対応する DIV を配置します)。言うまでもなく、カットとはDIVを描画し、CSSを使用してそのサイズと形状（つまり、margin、border、paddingの値）を指定することです。デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。



	ここでの焦点は溶接です。溶接するときは、異なるサイズの DIV ブロックを選択し、それらを適切に配置する必要があります。これは、DIV の位置、浮動小数点、Z インデックス属性の設定を含む、DIV 位置決めと呼ばれます。。 T i POSITION 属性: 4 つの属性値は、Static、Absolute、Relacted、Fixed です。次の表は、W3C でのこれらの属性値の説明です。
	static
	inherit Position 属性の値を親要素から継承することを指定します。
absolute

🎜 🎜 🎜 🎜 🎜。静的配置以外の最初の親要素と比較して配置されます。 🎜 要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。 🎜 🎜 🎜 🎜 🎜relative🎜 🎜 通常の位置を基準にして相対的に配置された要素を生成します。 🎜 したがって、「left:20」は要素の左の位置に 20 ピクセルを追加します。 🎜 🎜 🎜 🎜 🎜fixed🎜 🎜 ブラウザウィンドウを基準にして相対的に配置された絶対位置の要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。 🎜 🎜 🎜
配置。

4 つの属性値があります: left、right、none、

説明

none

デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。 inheritright 要素は右にフローティングします。 z-index の値は任意の整数値にすることができます。要素の「表示優先度」を表す正の数または負の数です。値が大きいほど表示優先度が高くなります。 2 つの簡単な図で十分に説明できます。最初の図の 3 つの div の Z-Index 値は、次のとおりです。 A & LT; B & LT;インデックス値は、A>B>C です。これらは CSS+DIV レイアウトの最も基本的な知識にすぎません。実際に使いこなしたい場合は、レイアウトのヒントをいくつか練習して経験する必要があります。たとえば、マージンに負の値を使用することは非常に実用的なトリックです (コンテナの幅が 700 ピクセルであると仮定して) コンテナを中央に固定幅で表示したい場合は、コンテナの相対配置方法を使用できます。、左の値をページの 50% に設定し、Margin-Left を自身の幅の半分に設定すると、ブラウザの解像度に関係なく、効果は固定幅で中央に配置されます。以下のように:

	float 属性の値を親要素から継承することを指定します。
left	要素は左にフロートします。

不明な学生は、いくつかの小さな例を作成して自分で練習することも、W3School にアクセスして練習することもできます。豊富な Web チュートリアルといくつかの小さな例を練習できます。オンライン。在 Float は難しいので、読者が上手にマスターできることを願って、ここに焦点を当てます。