CSS での基本的なレイアウトと書式位置の紹介

5 つの基本的なレイアウト配置タイプ: * 柔軟なレイアウト - 全体の幅とその中のすべての列の値は em 単位で書き込まれます。これにより、ブラウザーの指定された基本フォント サイズを使用してレイアウトを拡大縮小できるようになります。 これは、列の幅が広くなり、どのサイズでも行の長さがより快適で読みやすくなるため、視覚障害のあるユーザーにとってより魅力的でアクセスしやすいものになる可能性があります。 全体の幅は拡大縮小するため、デザインではこの幅を考慮する必要があります。 * 固定レイアウト - 全体の幅とその中のすべての列の値はピクセル単位で書き込まれます。 レイアウトはユーザーのブラウザの中央に配置されます。 * 流動的なレイアウト - 全体の幅とその中のすべての列の値がパーセンテージで書き込まれます。 パーセンテージは、ユーザーのブラウザ ウィンドウのサイズから計算されます。 * ハイブリッド レイアウト - ハイブリッド レイアウトは、他の 2 種類のレイアウト (弾力性のあるレイアウトと流動的なレイアウト) を組み合わせたものです。 ページの合計幅は 100% ですが、サイドバーの値は em 単位に設定されます。 * 絶対配置レイアウト - 前述のレイアウトの外側の列はすべてフローティング コンテンツを使用します。 絶対配置レイアウトは、その名前のとおり、絶対配置の外側の列を使用します。 これらのレイアウトを使用する場合、サイドバーが「文書の流れを高める」ため、不適切な結果が生じる可能性があることを覚えておく必要があります (たとえば、サイドバーが終了し、メイン コンテンツ領域内に含まれる場所では、フッターが「非表示」になる可能性があります)サイドバーよりもコンテンツが少ないページはフッターと重なります)。

最初の位置関係:position:fixed は位置 (ブラウザ全体の位置を基準とした) をロックします。これは、主要な Web サイトの右下隅またはその他の場所の小さな広告でよく使用されます。

ロックの位置を調整する必要がある場合は、次のメソッドを使用する必要があります:

position:fixed; top:0px; left :0px; right:0px ;bottom:0px" >

2 番目の位置関係: 絶対位置 (親要素に対する相対、絶対位置の上位)

(1) 最外側 アブソリュートがない場合は調整中にブラウザを基準に div が変化します。 (2) 最外側にアブソリュートがある場合は調整中に最も外側の境界を基準に div が変化します。

絶対位置を調整する必要がある場合は、次のメソッドを使用する必要があります:

position:absolute; top:0px; left :0px; right:0px ;bottom:0px" >

3 番目の位置関係: 位置: 相対位置 (表示されるべき位置を基準とした)

相対位置を指定するには、次のメソッドを使用する必要があります: < ;div style="width:300px; height:300px; position:relative; top:0px; left:0px; right:0px;bottom :0px" >