1. 崩壊度が高い ドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つまり、親要素の高さは子要素の高さと同じになります。ただし、子要素にフローティングが設定されている場合、子要素はドキュメント フローから完全に外れます。このとき、子要素は親要素の高さをサポートできず、親要素の高さが崩れてしまいます。
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル タイプ="text/css"> .box1{ 境界線: 10px 実線の赤; } </スタイル> </head> <本文> <div class="box1"> <div class="box2">あ</div> </div> </本文> </html> 結果: 親要素 box1 の高さは、子要素 box2 a の内容によって拡張されます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル タイプ="text/css"> .box1{ 境界線: 10px 実線の赤; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: 緑黄色; } </スタイル> </head> <本文> <div class="box1"> <div class="box2">あ</div> </div> </本文> </html> 結果: 親要素の高さは、子要素の高さ 100 だけ拡大されます。 子要素に float を設定する場合: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル タイプ="text/css"> .box1{ 境界線: 10px 実線の赤; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: 緑黄色; フロート: 左; } .フッター{ 高さ: 50px; 背景色: ピンク; } </スタイル> </head> <本文> <div class="box1"> <div class="box2"></div> </div> <div class="フッター"></div> </本文> </html> 結果: 子要素はフロートし、親要素には高さがありません。フッターが上に移動します。 折りたたまれないように親要素の高さを設定します。 .box1{ 境界線: 10px 実線の赤; height: 100px;/* 親要素の高さを設定します*/ } 結果: ただし、子要素の高さが高い場合は、オーバーフローの問題が発生してしまいます。親要素の高さが固定されると、親要素の高さは子要素の高さに自動的に適応しなくなるため、この解決策は推奨されません。 .box2{ 幅: 100ピクセル; 高さ: 200px; 背景色: 緑黄色; フロート: 左; } 結果: 2. 崩壊問題を解決する W3C 標準によれば、ページ上のすべての要素には、ブロック フォーマット コンテキスト (略して BFC) と呼ばれる暗黙的な属性があります。このプロパティはオンまたはオフに設定でき、デフォルトではオフになっています。 要素の BFC を有効にする方法: 要素をフロートに設定する この方法では親要素を拡張できますが、親要素の幅が失われます。また、この方法では下位の要素も上に移動するため、問題は解決されません。 要素を絶対位置に設定します 上記のような問題もある 要素をインラインブロックに設定する これによって問題は解決しますが、幅が狭くなるため、お勧めできません。 要素のオーバーフローを非表示の値に設定する 推奨される方法: 親要素のオーバーフローを非表示に設定すると、副作用を最小限に抑えて BFC を有効にすることができます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル タイプ="text/css"> .box1{ 境界線: 10px 実線の赤; オーバーフロー: 非表示; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: 緑黄色; フロート: 左; } .フッター{ 高さ: 50px; 背景色: ピンク; } </スタイル> </head> <本文> <div class="box1"> <div class="box2"></div> </div> <div class="フッター"></div> </本文> </html> 結果: 注意: ただし、BFC は IE6 ではサポートされていません。そこでhasLayoutが導入されます。 IE6 には、BFC と同様の機能を持つ hasLayout という別の暗黙的なプロパティがあるため、IE6 ブラウザでは hasLayout をオンにすることでこの問題を解決できます。これを有効にする方法は多数ありますが、副作用が最も少ない方法は、要素のズームを 1 に設定することです。 ズームは拡大を意味し、その後に数字が続きます。記入する数字は、要素が何倍に拡大されるかを表します。 zoom:1 は要素を拡大しないことを意味しますが、このスタイルを通じて hasLayout を有効にすることができます。 ズーム スタイルは IE でのみサポートされ、他のブラウザーではサポートされません。 zoom: 1;/* ie6と互換性あり*/ overflow: hidden;/* IE6以外と互換性あり*/ CSS の高さの縮小の問題の解決法に関するこの記事はこれで終わりです。CSS の高さの縮小に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: meta name="" content="の機能の詳細な説明
最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...
この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...
目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...
テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...
この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...
インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...
Linuxファイルを表示する方法ファイルの内容を表示するコマンド: catは最初の行からコンテンツを...
目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...
以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...
原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...
目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...
nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...
marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...
目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...