HTMLを配置するにはいくつかの方法があります

html 配置には次のものが含まれます: 1. デフォルトの配置、静的; 2. 相対配置、相対; 3. 絶対配置、絶対; 4. 相対配置と絶対配置の混合、相対&&absolute; 5. 固定配置、固定; 6 、浮く、浮く。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. static (デフォルト)

要素 (p など) の配置方法を指定しない場合、デフォルトは static です。文書の流れ (フロー) 配置、要素を適切な場所に配置すること。したがって、異なる解像度の下では、フロー ポジショニングの使用が適切に適応され、比較的良好なレイアウト効果が得られます。

一般に、現在の要素の配置方法が静的であることを指定する必要はありません。これがデフォルトの配置方法であるためです。親要素から継承した位置決めシステムをオーバーライドする場合を除きます。

2. Relative (相対位置決め)

静的ベースに基づいて、要素を元の位置に調整 (変位) させたい場合は、次のように設定できます。要素の位置を相対的に指定し、相対移動を指定します (上、下、左、右を使用)。

注意すべき点は、相対的に配置された要素がまだドキュメント フロー内にあり、元の位置にはないにもかかわらず、元の位置にあった位置スペースを依然として占有していることです。

3. Absolute (絶対配置)

文書内の指定した位置に要素を配置したい場合、絶対配置を使用できます。要素を絶対値に設定し、上、下、左、右を使用して配置します。

絶対配置では、要素がドキュメント フローから削除され、その要素が元々占めていたスペースが他の要素で埋められることになります。

4. 相対と絶対の混合 (相対位置と絶対位置の混合)

親要素に対して相対を設定し、その子要素の 1 つに絶対を設定すると、例:

<div>
    <div>
    </div>
</div>

子要素の絶対位置参照は親要素です。

混合配置を使用すると、次のような CSS を使用して 2 列の配置を実現できます。

#div-parent {
 position:relative;
}
#div-child-right {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-child-left {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

5、固定 (固定配置)

#絶対配置の参照は「最後に配置された親要素 (静的はカウントされない)」であることはわかっていますが、要素の配置の参照を常にドキュメント全体 (ビューポート) にしたい場合はどうすればよいでしょうか?

答えは、固定位置を使用することです。固定位置の参照オブジェクトは常に現在のドキュメントです。固定位置を使用すると、p をブラウザードキュメントの左上、右上などに簡単に配置できます。たとえば、情報プロンプト p を追加し、右上隅の p を固定したい場合は、次の css

.element  { 
    position:fixed; 
    top:2%; right:2%;
 }

6, float(float) を使用できます。

フローティングについて理解する必要があるのは次のとおりです:

* フローティングでは要素がドキュメント フローから削除され、そのスペースは他の要素によって埋められます。

#フローティング パラメータ オブジェクトは親要素であり、親要素のコンテナ内でフロートします。

#*フローティング要素以降のフローティングの影響をクリアするために、フローティング要素の後に p を追加し、この p のクリアを両方に設定します。

#両方の要素が float に設定されている場合、2 つの要素は重なりません。最初の要素は一定のスペースを占め、2 番目の要素はその直後に続きます。 2 番目の要素を後に続かせたくない場合は、2 番目の float 要素で Clear を使用できます。

7、参照

値 staticabsolutefixedrelativeinherit推奨される学習:

説明
要素は、ドキュメント フローに表示される順序でレンダリングされます。これがデフォルトです。
要素は、その要素に相対して配置されます。最初に配置された (静的ではない) 祖先要素
要素はブラウザ ウィンドウに対して相対的に配置されます
要素は通常の位置を基準にして配置されるため、「left:20」は要素の左の位置に 20 ピクセルを追加します。
値位置プロパティのは親要素から継承されます

html ビデオ チュートリアル

以上がHTMLを配置するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。