HTML+CSSの基本

HTML+CSS の基本

CSS では、HTML のタグ要素は一般に、ブロック要素、インライン要素 (インライン要素とも呼ばれる)、インライン ブロック要素の 3 つの異なるタイプに分類されます。

一般的に使用されるブロック要素は次のとおりです:

、

、

...

、

、

、

、、

、

、

一般的に使用されるインライン要素は次のとおりです:

、 、
、 、、、、、、、

一般的に使用されるインライン ブロック要素は次のとおりです:

、

ブロック レベルの要素の特徴: 各ブロック レベルの要素は最初から始まります。新しい行で始まり、その後の要素も新しい行で始まります。 (実に横暴、ブロックレベルの要素が1行を占有します)

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

3. 設定されていない場合、幅が設定されていない限り、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。

インライン要素の特徴:

1. 要素の高さ、幅、上下の余白は設定できません。テキストまたはそれに含まれるテキスト 画像の幅は変更できません。

inline-block 要素の特徴:

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

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

CSS には、英語で要約すると、Flow、Layer、Float という 3 つの基本的なレイアウト モデルが含まれています。

Web ページには 3 つの要素のレイアウト モデルがあります:

1. フロー モデル (Flow)

2. フロート モデル (Float)

まずフロー モデルについて説明します。デフォルトの Web ページ レイアウト モード。つまり、デフォルト状態の Web ページの HTML Web 要素は、フロー モデルに従って Web ページのコンテンツを配信します。


流体レイアウト モデルには 2 つの典型的な特性があります:

まず、ブロック要素は垂直方向に拡張され、含まれる要素内で上から下に順番に配置されます。これは、デフォルトでは、ブロック要素の幅がすべて 100% であるためです。実際、ブロック要素はすべて行の形式で位置を占めます。


2 番目のポイント、フロー モデルでは、インライン要素は、含まれる要素内で左から右に水平に表示されます。

レイヤーレイアウトモデルは、画像ソフトPhotoShopで非常に人気のあるレイヤー編集機能のようなもので、各レイヤーを正確に配置して操作することができますが、Webデザインの分野では、レイヤーレイアウトはWebの機動性のために普及していません。ページサイズ。ただし、Web ページ上でローカルにレイヤー レイアウトを使用することには依然として利点があります。

WebページにHTML要素を正確に配置する方法 画像ソフトPhotoShopのレイヤーと同じように、各レイヤーを正確に配置して操作することができます。 CSS は、レイヤー レイアウト モデルをサポートするための一連の配置プロパティを定義します。

レイヤー モデルには 3 つの形式があります:

1. 絶対配置 (位置: 絶対)


2. 固定配置 (位置: 固定)

レイヤー モデル - 絶対配置:

要素のレイヤー モデルで絶対位置を設定したい場合は、position:absolute (絶対位置を示す) を設定する必要があります。このステートメントの機能は、要素をドキュメント フローの外にドラッグし、 left、right、top、bottom 属性を相対に設定します。位置決め属性を持つブロックを含む最も近い親にブロックを絶対的に配置します。そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザ ウィンドウに対して相対的になります。

レイヤーモデル - 相対位置:

レイヤーモデルで要素の相対位置を設定したい場合は、position:relative(相対位置を示す)を設定する必要があります。これにより、法線での要素の位置が決まります。ストリーム内の左、右、上、下の属性を介してドキュメントをオフセットします。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。 、top、bottom 属性では、オフセット前の位置は変更されません。

サイドモデル - 固定位置:


固定: 絶対位置タイプと同様に固定位置を示しますが、その相対移動座標はビュー (画面内の Web ページウィンドウ) そのものです。ビュー自体は固定されているため、画面上でブラウザ ウィンドウの画面位置を移動したり、ブラウザ ウィンドウの表示サイズを変更したりしない限り、ブラウザ ウィンドウのスクロール バーがスクロールしてもビューが変化することはありません。常にブラウザ ウィンドウ内のビューの特定の位置にあり、ドキュメントの流れに影響されません。これは、background-attachment:fixed 属性と同じ機能を持ちます。


可変幅のブロック要素を中央に配置するには 3 つの方法があります (これら 3 つの方法は現在よく使用されています):

table タグを追加する

表示を設定する: inline メソッド: 最初の方法と同様に、表示タイプをInline要素に、可変幅要素の属性を設定

position:relative と left:50% を設定する: 要素を左に 50% シフトするには、つまり中央揃えの目的を達成するために、相対位置を使用します。

高さによって決定されるテキストの 1 行の垂直方向の中央揃え方法。親要素の設定は、親要素を設定することです。これは、要素の高さと行の高さの一貫性を高めることで実現されます。 (高さ: 要素の高さ、行の高さ: 名前が示すように、行の高さ (行間隔) はテキスト内の行間のベースライン間の距離を指します)。 Chrome、Firefox、および IE8 以降のブラウザでは、ブロック レベルの要素の表示をテーブル セルに設定し (テーブル セル表示に設定)、vertical-align 属性をアクティブにすることができますが、IE6 および 7 はこのスタイルをサポートしていないことに注意してください。 . 互換性の比較 違い。