CSS_html/css_WEB-ITnose の Position プロパティと Float プロパティの詳細な説明

Position と Float については、日常的に非常に頻繁に使用される 2 つの CSS 属性であると言えます。ほとんどの人は、これら 2 つの属性の使用について漠然とし、不明確であると考えられます。この記事では、主にこれら 2 つの属性の使用法と、2 つの属性の相互使用に関するいくつかの議論を紹介します。

この記事の主な論点:

1. Position 属性と Float 属性の基本的な使用法
2. Position 属性と Float 属性が要素に及ぼす影響
3. 上記の Position 属性と Float 属性の使用による影響
4. Position の使用と Float 属性

この記事の構成ポイント:

1. HTML レイアウトの基本ポイント

ボックスモデル

HTML の通常の流れ

2. Position 属性

属性値の紹介

使い方メソッドの紹介

位置に関するちょっとした知識

3. Float 属性

属性値の紹介

使い方の紹介

Position との互換性の問題

HTML レイアウトの基本ポイント:

とをマスターしたい場合Position 属性と Float 属性を適切に使用します。これらを正しく使用する必要があります。 HTML の 2 つの基本ポイントを明確に理解する必要があります。

1. ボックスモデル

2. HTMLの通常の流れ

ボックスモデル

HTMLの要素には、ブロック要素とインライン要素の2種類があることに注意してください。ここでのインライン要素（Inline）は、Display 属性の inline および block 属性値と同じではありません。ボックス モデルのインラインとブロックは、表示属性の親クラスに似ています。たとえば、表示属性の list-item 属性値はブロック タイプです。

2 つのボックス モデルの違いを直感的に見ていきます

• Block タイプの要素では幅と高さの属性を設定できますが、インライン タイプの設定は無効です。
• ブロック タイプの要素は 1 行を占めます (直観的に言えば、新しい行に表示され、要素のスタイルを積極的に変更しない限り、他の要素と同じ行に表示することはできません)。一方、インライン タイプの要素は 1 行で表示されます。 。
• ブロック タイプ要素の幅はデフォルトで 100% ですが、インライン タイプ要素の幅は、独自のコンテンツと子要素に基づいて決定されます。

一般的な要素の分類をいくつか挙げます

• ブロック要素: P、DIV、UL、LI、DD、DT...
• インライン要素: A、IMG、SPAN、STRONG...

HTML の通常の流れ

ブラウザは HTML ソース コードを読み取るとき、コード内に出現する順序に従って要素を読み取ります。要素の最終的な表示方法は、要素のボックス モデルに基づいて決定されます。インライン要素は左から右に描画され、ブロック要素は上から下に描画されます。 (以下に示すように)

01

07	strongemspan

08

A

09

B

10

C< ; /div>

要素のデフォルトのスタイルを変更しない場合、要素は HTML の通常のフロー内の位置を「占有」し、「占有」のサイズと位置は" 位置は要素のボックス モデルによって決定されます。したがって、後述する Position 属性と Float 属性によって、この通常の流れから要素が離脱するかどうかが重要なポイントとなります。

Position 属性:

Position 属性は HTML の通常のフローの特性をよく反映できるため、最初に Position 属性について説明します。通常の流れから脱却することと、異なる位置の値を適用した後に表示属性を変更することの2点があるかどうかがポイントです。

Position の属性値

Position の属性値は、static、relative、absolute、fixed の 4 つです。

Static

デフォルトでは全ての要素のposition属性はstaticになっており、レイアウトでよく使う相対配置や絶対配置のtop、bottom、left、rightの属性は位置がstatic無効の場合によく使われます。その使用法は次のとおりです。要素の位置属性を変更した後、要素を静的にリセットして、ページのデフォルトの通常のフローに戻すことができます。

相対的

一般に相対的位置付けとして知られており、相対的な理解に重点が置かれています。前に、各要素はページの通常のフロー内の位置を「占める」と述べましたが、この位置はデフォルトの位置として理解でき、相対的な位置決めは要素を要素のデフォルトの位置からずらすことですが、元の位置とは異なります。位置は通常のフロー内で維持されます。デフォルトの位置は通常のフローから逸脱するものではなく、単なる視覚的なオフセットです。

ブロック要素を例に挙げてみましょう:

1

4

A

5

B

6

C

右側の図の黒い点線は要素 B のデフォルトの通常のフロー位置であり、黄色の線は要素の相対オフセットを表しますB.要素 C が元の位置に残り、要素 B のオフセットによって変化していないことがはっきりとわかります。

インライン要素を見てみましょう（ここでは例として最も一般的に使用されるspanを使用します）

1

6	strongemspan

ここでは、width 属性をspan (100px)に割り当てていることに注意してください。ただし、相対位置属性値を使用した後でも、span は width 属性に対して無効であることがわかります。つまり、position:relative は、inline 要素の Display 属性を変更しません。この概念は非常に重要です (次の絶対値に注意してください)。違い）。

Absolute

一般に絶対位置決めとして知られている絶対位置決めは、どのように理解すればよいでしょうか？この「ルート」要素をオフセットします。ノード ツリー内のすべての親 (祖先) 要素が位置属性値を相対または絶対に設定していない場合、要素は最終的に本体を配置します。 Position:Absolute が適用された要素は、ページ内の通常のフローから切り離され、Display 属性を変更します (強調が追加されます)

まず、例としてデフォルトのネストされた DIV を使用します

1

< ;div style="background: #fff">

2

A

3

& lt;div style="背景: #81b6ff"> 4

A - 1

5

>

6

A - 2

7

;

8

9

次に、親要素 (A、A-1) を配置せずに、div A-2 の絶対位置 (上: 0、左: 0) を設定します。ポジション値

1

A

2

A -ディビジョン >

3

上の図から、次の結論をまとめることができます。

1) ブロック要素が位置 (相対/静的) にある場合、幅は 100% ですが、position: ABS を設定すると、幅は自動に変更されます (親要素の幅の影響を受けます)。 。 2) 要素がposition:Absoluteに設定された後、top、bottom、left、rightの属性が設定されていない場合、ブラウザはデフォルトでautoに設定し、autoの値が「デフォルトの位置」になります。要素の。つまり、position:Absolute を設定する前後の offsetTop 属性と offsetLeft 属性の値は変化しません。 特殊なケース:

Firefox は、auto ではなく、top と left を offsetTop と offsetLeft の値に直接設定します。

IE7 でのパフォーマンスは float に似ており、親要素の末尾に追加されます。

位置の知識

1）position:relative/absoluteが適用された要素の場合、margin属性は引き続き有効です、position:relativeを例に挙げます。左、上、下、右の属性が設定されている場合、要素を正確に配置して干渉要因を最小限に抑えることが困難になるため、マージン データを設定しないことをお勧めします。

2)position:Absolute はルート要素のパディングを無視します。

• 1

A

2

A - 1

4

3

6

3 ) IE6/7でposition属性を設定すると、z-index属性が発生します。無効になります

1