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 id="parent" style="position:relative">
    <div id="child" style="position:absolute">
    </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、固定 (固定配置)

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

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

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

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

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