CSS02_html/css_WEB-ITnose の概要

1. 要素の分類

1. ブロック要素: 表示の設定: ブロックは、要素をブロックレベルの要素として表示します。

ブロックレベル要素の特徴:

1.1. 各ブロックレベル要素は新しい行で始まり、後続の要素も新しい行で始まります。 (ブロックレベルの要素は 1 行を占めます);

1.2. 要素の高さ、幅、行の高さ、および上下の余白を設定できます。要素は設定されていません。 以下では、幅が設定されていない限り、要素は親コンテナの 100% です。

2. インライン要素: コード表示: inline を通じてブロック要素をインライン要素に設定することもできます。

2.1. 他の要素と同じ行にあります。

2.2. 要素の高さ、幅、および上下の余白は設定できません。要素の幅 これは、要素に含まれるテキストまたは画像の幅であり、変更できません。

3. インラインブロック要素: インライン要素とブロック要素の両方の特性を備えています。コード表示: inline-block は要素をインライン ブロック要素として設定します。

3.1. 他の要素は同じ行にあります;

3.2. 要素の高さ、幅、行の高さ、および上下の余白を設定できます。

手順:

2. ボックス モデル

ボックス モデル: 月餅の箱: 中の小さな月餅はそれぞれ div に相当し、小さな月餅間の距離 包装箱を詰め物といい、小さな月餅間のスペースをマージンといい、月餅の包装を縁取りといいます。

境界線: ボックス モデルの境界線は、コンテンツを囲む線であり、その太さ、スタイル、色を設定できます。

div{

border:2px ソリッドレッド;

}

パディング:

div{

パディング:上、右、下、左;

}

境界線:

div{

マージン: 上、右、下、左; >

}

3. レイアウトモデル

1. フローモデル (フロー)

デフォルトの Web ページのレイアウトです。ブロック要素は、ブロック内で上から下に向かって垂直に配置されます。デフォルトの幅は 100% で、インライン要素はブロック内で左から右に表示されます。 。

2. フローティング モデル (フロート)

2 つの要素を並べて表示したい場合は、CSS を使用してそれらをフローティングとして定義できます。 >

float: left または right;

3. レイヤー モデル (レイヤー)

各レイヤーは、指定された座標に従って正確に配置できます。

レイヤー モデルの 3 つの形式:

3.1. 絶対位置: 位置を設定: 絶対位置 (絶対位置を示す)、要素をドキュメント フローの外にドラッグし、左、右、 top 属性とbottom 属性は、位置決め属性を持つブロックを含む最も近い親を基準として絶対的に配置され、そうでない場合は本体を基準として配置されます。

3.2. 相対位置決め

3.3. 固定位置決め