layout_html/css_WEB-ITnose の css 要素

なぜレイアウトの聖杯を探しているのですか?

優れたレイアウトにより、Web ページの構成がより合理的になり、適応性がより強固になります。最も重要なことは、コンテンツ層の分離を実現することです。プレゼンテーション層では、フロントエンド開発の段階的な強化とコードの最適化を実現します。これが、フロントエンド プログラマーが聖杯レイアウトを追い求める理由です。

1 相対 & 絶対

相対配置と絶対配置は基本的にドキュメントの通常のフローから外れますが、相対配置ではドキュメント フロー内にもともと存在していたスペースが保持されます。影響 ドキュメント フローのレイアウトに従って、絶対配置はドキュメント フロー内のスペースを削除し、ドキュメント フローから切り離してそれを覆い、犬の皮膚絆創膏のように頑固です。通常のドキュメント フローで要素の Z 軸座標を変更しても役に立ちません。一般に、絶対位置指定には 4 つの特性があります。1 つはドキュメント フロー内の元の位置を削除すること、2 つ目は通常のドキュメント フローをカバーすること、3 つ目はデフォルトで位置指定 (つまり (0,0)) を基準にすることです。ブロック、その親要素の位置がデフォルト値ではない場合、基点は親要素にあります。それ以外の場合は、最初に含まれるブロック本体まで検索を続けます。 left と top に値が割り当てられていない場合、デフォルトは次のとおりです。ドキュメント内の元の位置。フロー内の 4 番目の値は、定義後の要素がブロック レベルのボックスにデフォルト設定されることです。相対位置決めははるかに単純で、元の位置を基準としたオフセットです。以下は、レイアウト内での絶対位置の実装です。サイドバーの高さが不明な場合、フッターを覆ってしまいます。

絶対配置を使用して、ページのメインコンテンツを本文の前面に配置して、コンテンツファーストのレイアウトをさらに実現することもできます。

2float＆clear

。フローティングは親要素に対して相対的であり、後続の要素は元の位置空間に入り、フローティング要素によって隠されて表示されなくなる可能性があります。そして、多くの場合、div の上にあるフローティング div を停止したくないので、クリアフローティングクリアを使用します。

当時は、margin を使って処理していましたが、css2.1 では、左側に div が浮いている場合に、clear スペースを解放する機能が登場しました。 、マージントップの望ましい効果を達成するために、上部に追加のクリアが存在します。

3 margin : -100%

マイナスのマージンは、ドキュメント フローとフローティング フローのレイアウトを変更し、後からランク付けされた要素を前に配置することができ、HTML の構造をより合理的にすることができます。これにより、メインコンテンツ div を最前面に置くことができます。左右のサイドバーを後ろに配置できます。以下の通り

これは、ネガティブ マージン レイアウトの簡単な例です。ネガティブ マージン レイアウトのアイデアにより、人々はコンテンツ レイヤーとプレゼンテーション レイヤーの分離の夜明けを見ることができます。ただ、古いIEブラウザとの相性が非常に悪く、パソコンのブラウザなのか分かりませんが、display:inlineを試してみるとウィンドウ幅が一定以上になると下に余計なものが配置されてしまいます。質問。

4 min-width & max-width

これら 2 つの非常に便利な属性は、width:100% などのパーセント レイアウトの崩壊を防ぎます。また、max-width を使用すると、無限の拡張によってページの幅が乱雑になるのを防ぐことができます。互換性が問題で、IE ブラウザ 7 以降のみが互換性があります。継承に加えて、それらの値には数値とパーセンテージの 2 つの形式があります。

min-width の例: 最初のレイアウトでは 3 つの div が 1 つの div#main に配置され、親要素には単純な幅がありません: 100% が表示されます

これは多くの Web サイトで許容できません。 ( 3カラムの位置変更）、コンテンツ優先原則を満たす優れたレイアウト

参考記事： http://www.cnblogs.com/mofish/archive/2011/01/18/1938543.html

参考サイト： W3C

私は学生です。間違いがあれば修正してください。この言葉遣いがエッチなものではないのは、単にこれが自分用の要約であり、修正するのが面倒だったからです。とりあえずやりましょう。