CSS のフローティング、配置、および親コンテナーの折りたたみの問題

フロントエンドに触れてから 3 か月が経ちましたが、数日前に IFE2017 に参加したので、私のレベルはまだ平均的です。 CSS でのフローティング、配置、ソートのレイアウトと親コンテナーの折りたたみの問題に関するいくつかの考え。

まず、フローティングと配置は CSS のレイアウトの基本です。フローティングと配置により、各ボックス モデルをピクセル レベルで正確に制御できるため、その重要性がわかります。

まずフローティングについて話しましょう:

HTML のドキュメント オブジェクト モデルでは、ブロック レベルの要素を並べて配置する場合、ブロック レベルの要素が 1 行を占有するということになります。 1 つ目は、CSS でブロックレベル要素の表示を inline-block に設定する方法です。しかし、多くの場合、この方法を使用するのは適切ではありません。フローティング方法を使用することが多くなります。

フローティングには、主に 2 つのタイプがあります: left; と float: right; フローティングは、ブロックレベルの要素を標準のドキュメント フローから切り離すことができます。または、親コンテナの境界に達します。行の残りの幅が不十分な場合、フローティング ボックスは次の行にフローティングされます。フローティングは、ページ レイアウトを実装するためのソリューションを提供します。

しかし、無視できないのは、単純なフローティングではインターフェースのレイアウトのニーズを満たせない場合があるということです。このとき、位置決めの重要性は、相対（相対位置決め）、絶対（絶対位置決め）、固定（固定位置決め）、静的の 4 種類に分類できます。要素に位置決め属性を適用しない場合、それは静的と同等です。

では、相対的な位置関係を理解するにはどうすればよいでしょうか?相対位置が適用された要素 (ボックス モデル) は、標準のドキュメント フローから逸脱しないように、要素 (ボックス モデル) の微調整を実現するために上、左、右、下の値を設定できます。 「上」は、要素が元の位置を基準にして位置が下に移動することを意味します (負の値を設定できます。これは、正の値を下に設定することと同じです)。元の位置に対して右に移動します。同様に、右にすると左に移動し、下に移動すると上に移動します。

絶対配置: 絶対配置が適用された要素は、あたかも存在しなかったかのようにドキュメント フローから分離されます。このとき、その配置は、相対配置が適用された祖先要素に対して相対的になります。また、非常に重要な機能もあります。設定された変位値に従って「交差」します。これは何を意味しますか?つまり、上、左、右、下の設定は、その祖先要素 (ボックス) の境界を基準にしています。変位方向が設定されている場合、要素 (ボックス) はまずその方向に境界に移動し、次に境界に対して相対的に移動します。

固定位置: 固定位置も標準のドキュメント フローから分離されていますが、ブラウザ ウィンドウに対して相対的なものであり、スクロール バーやインターフェイスの動きによって変化することはありません。また、上、左、右、下の値を設定することもできます。 。

カラムレイアウトに関しては、個人的には以下の方法を使っています:

1. 2カラムに分かれている場合、2つのボックスに同時にfloatを適用してレイアウトすることができ、その幅を設定することができます。左右のボックスまたは幅のパーセンテージ。

2. 2 列にレイアウトすることもできます。左側のボックスに左フローティング レイアウトを適用したり、右側のボックスに位置を適用したり、位置にマージンの値を設定したりすることもできます。

3. 3列レイアウトの場合は、左右のボックスをフロートさせて配置し、中央の要素（ボックス）の左右の余白を設定して配置する方法が最適です。 。

フローティングは素晴らしい取り組みですが、コンテナ内のすべての要素がフローティングになると (親コンテナの高さがゼロになります)、親コンテナが折りたたまれる可能性があることを理解する必要があります。内部の非浮動要素ではサポートが不十分です。親コンテナを起動すると、親コンテナの高さが 0 になるか、ページ レイアウトの要件を満たすのに十分ではありません。この問題を解決する方法をいくつか考えなければなりません。いくつかの方法:

1. 親コンテナの高さを設定します Height

2. 親コンテナを overflow: hidden または overflow: auto に設定します

overflow:hidden;
overflow:auto;

3. 親要素を float に設定します (非推奨)

4. 空の要素をそれに設定します (clearfix: Both)

5. 親要素に次のスタイルを適用します:

.clearfix:before,
.clearfix:after
{
    content:"";
    display:table;
}
.clearfix:after
{
    clear:both;
}

まとめると、Web ページ内の要素のレイアウトでは、フローティングと配置がよく使用されます。組み合わせて使用​​すると、必要な効果を実現できます。

上記は、この期間中の CSS の配置とフローティングに関する私の小さな経験の一部です。間違いがあるかもしれません。一緒に進歩できるよう、ご指摘いただければ幸いです。多くの大きな間違いを読んで、私は自分の文書から上司の意見を多く借用し、自分自身の理解をある程度表明しながら、同時に関連する知識についての理解を深めました。皆で力を合わせてフロントエンドロードに日々邁進していきたいと思います！

CSS のフローティング、位置決め、親コンテナーの折りたたみに関するその他の問題については、PHP 中国語 Web サイトの関連記事に注目してください。