ホームページ > 記事 > ウェブフロントエンド > CSS ドキュメント flow_html/css_WEB-ITnose
CSS ドキュメント flow_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:55:03840ブラウズ
CSS の位置決めメカニズムについて話すときに、多くの CSS 書籍で「ドキュメント フロー」というキーワードが言及されますが、この言葉は著者にとって説明が必要ないほど単純であるため、この言葉の具体的な文言を目にすることはほとんどありません。説明はありますが、位置決めメカニズム全体をよく理解するには、この概念を理解することが重要だと思います。インターネット上でネチズンの理解を確認し、それから W3C を読んで自分の理解と組み合わせました。これは、W3C の上記の文に要約できます: 「要素の位置は、(X)HTML 内の要素の位置によって決まります。」
上記の文をよく理解するには、消去法を使用できます。 CSS の位置決め機構には、通常のフロー、フロート (float: left/right/none)、位置決め (position: static/relative/absolute/) の 3 つがあります。
通常のフローとは、HTMLでの書き方は上から下、左から右へのレイアウトです。
例:
明らかに、これは最も一般的なドキュメント フローであり、左から右に、最初に 01、2 番目に 02、最後に 03 の順序で 1 つずつ表示されます。
DIV の 1 つに FLOAT 属性または絶対配置 (静的/相対を除く、これら 2 つは依然として通常のドキュメント フローを維持します) が与えられると、その DIV はドキュメント フローから完全に分離され、いかなる領域も占有しなくなります。空間。
例:
識別しやすいように、それぞれ 01 緑、02 グレー、03 黄色としました。次に、01 を左にフロートします。その結果、01 はドキュメント フローから外れ、スペースをまったく占有しないため、02 が 01 の代わりになります。その結果、02 は 01 によってカバーされます。
同様に、絶対配置は FLOAT と同じで、ドキュメント フローから分離され、元のドキュメント フローのスペースを占有しなくなります。それを証明するために、誰もが日常生活で頻繁に遭遇する別の問題を取り上げてみましょう
何度も考えてみてください、高度な適応性の原理は実際には次のとおりです:
;div id=”b”>これはb
アウト アウト アウト スルー アウト スルー ' ' ‐ ‐ ‐ オフアウト ‐‐ b と c、色は変更されません、a の高さは自動です、高さはb の高さは 100、C の高さは 500 です。 B と c は左に浮いています。その理由は、浮いているときに場所をとらなくなるためです。占有スペースがないということは、コンテナの中に何もないということであり、開けることができません。解決策は、黄色の DIV の後に DIV を追加し、フロートをクリアすることです。彼に占有スペースを与えてあげれば、それは自然に広がっていきます。それを試してみてください！
クリア後の効果:
概要:
1. CSS の配置メカニズムには、通常のフロー、フローティング、配置の 3 つがあります。
2. ドキュメントの流れ: 上から下、左から右に 1 つずつ、シンプルまたは通常のレイアウト。
3. ポジショニング: (位置)
静的: ドキュメントの流れを維持します。
相対: 元の位置を基準にして移動し、文書の流れを維持し、スペースを占有します。
絶対: ドキュメント フローから分離され、スペースを占有せず、そのブロックを含むブロックに対して相対的に配置されます。
4. Float: (Float) はドキュメント フローから分離されており、スペースを占有しません。
5. 以前は、position:static 属性は冗長だと思っていましたが、今ではその役割はドキュメント フロー内で要素を保持することであるようです。
上記はすべて、私「No.1」が学習の過程で発見した問題であり、より多くのアイデアを持つ子供たちの靴は、共通の進歩の効果を達成するために意見を表明し、お互いに意見を交換することを歓迎します。