ホームページ >ウェブフロントエンド >htmlチュートリアル >BFC 幅適応型layout_html/css_WEB-ITnose
BFC 幅適応型layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:111399ブラウズ
アダプティブ レイアウトといえば、「幅アダプティブ レイアウトの紹介」という記事で学びました。当時の中心的なアイデアは、主に float+margin の形式を使用することでした。ブロック要素の流体特性を使用して、float 要素の幅が計算され、ブロック要素の対応するマージンに割り当てられます。ただし、これを行うには欠点があります。つまり、毎回 float 要素の幅を把握し、それをブロック要素のマージンに割り当てる必要があるということです。
しかし、「BFC の簡単な分析」で、BFC には、BFC の領域が外部の浮動要素と重ならないという特性があることがわかりました。そして、この機能を利用して 2 列のアダプティブ レイアウトを実装しました。もう一度見直してみましょう。
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .leftDiv { width:100px; height:100px; background:green; float:left; } .normalDiv { height:100px; background:pink; /*添加overflow:hidden，触发元素BFC*/ overflow:hidden; } </style> </head> <body> <div class="leftDiv"></div> <div class="normalDiv"> </div> </body></html> コードを実行します。スクリーンショットは以下です
フローティング要素 (緑色の四角形) と div.noramDiv 要素が重なっておらず、マージンを追加していないことがわかります。
上記のコードを自分で実行してページ幅を拡大したり縮小したりすることもできます。実際に適応性があることがわかります。
(追記: 上に示した 2 列の自己適応を実装する BFC の例は、「float の例の説明」と比較して検討すると、効果がさらに良くなります。)
overflow:hidden; を使用しました。上記の div.normalDiv の BFC をトリガーします。 「BFC の簡単な分析」では、要素が BFC になるようにトリガーする方法がいくつかあることを学びました。
1. float 属性は存在しません
2. 位置は絶対または固定です
3. overflowの値 非表示
4. displayの値はtable-cell、table-caption、inline-blockのいずれかです。
3 番目の点を除いて、オーバーフローの値は表示されません。BFC アダプティブ レイアウトの実装に適した他の方法はありますか?
もちろん違います。
まず最初のfloatの点ですが、floatは要素BFCをトリガーするため、float自体が要素を包み込む、ブロックレベル要素の流動性を壊すなどの特性があるため、アダプティブレイアウトには使用できません。
位置の 2 番目のポイントに関しては、位置は要素をドキュメント フローから大きく分離するため、アダプティブ レイアウトには使用できません。
4番目のdisplay:table-cellについては、幅より無限大に設定した場合、そのコンテナの幅を超えることはありません。
チッ、チッ、チッ！これは完璧ではないでしょうか？次に、その幅を非常に大きなサイズに設定すると、アダプティブ レイアウトに使用できます。
次のコードを見てください
<!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .leftDiv { width:100px; height:100px; background:green; float:left; } .normalDiv { height:100px; background:pink; /*添加display:table-cell，且将宽度设置为很大，如9000px*/ display:table-cell; width:9000px; } </style> </head> <body> <div class="leftDiv"></div> <div class="normalDiv"></div> </body></html> コードを実行すると、効果の画像が上に表示されます。
追記: 自分で実行してからブラウザを拡張すると、より深い経験ができました。ははは、試してみればわかりますが、それは可能です。
4 番目のポイントの display:table-caption については、直接フィルターします。
4時位置のdisplay:inline-blockはfloatと同じラッピングプロパティを持つためフィルタリングされています。ただし、「BFC - Clear Float」で、IE6 と 7 には hasLayout があり、IE6 と 7 では流動的なプロパティがあると述べました。したがって、IE6 と 7 のアダプティブ レイアウトを解決できます。コードは次のとおりです
.floatElm { float: left;}.bftContent { display: inline-block;} ということで、BFC をトリガーする方法として、アダプティブ レイアウトで使用できるメソッドは次のとおりです
overflow (hidden/auto) |
短所: 1. overflow:hidden コンテンツが多すぎる場合、カット機能があります 2. Overflow:auto コンテンツが多すぎる場合、スクロールバーが表示されます |
display:inline-block | 短所: IE6 および 7 にのみ適用可能 |
display:table-cell |
短所: IE8+ およびその他のブラウザにのみ適用可能 |
結論として、一般的なことがわかりますBFC を使用してアダプティブ レイアウトを実装する方法は次のとおりです。
.floatElm { float:left;}.bfcContent { display:table-cell; width:9000px;/*宽度大到屏幕宽度即可*/ /*hack手段，针对IE6、7*/ *display:inline-block; *width:auto;} さて、このメソッドを使って、お楽しみとして 3 列レイアウトを実装してみましょう。コードは次のとおりです。
<!-- 左右宽度为100px，中间自适应--><!DOCTYPE html> <head> <title>BFC</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .floatLeft,.floatRight { width:100px; height:100px; } .floatLeft { /*左浮动触发BFC*/ float:left; background:green; } .floatRight { /*右浮动触发BFC*/ float:right; background:yellow; } .bfcContent { /*table-cell触发BFC*/ display:table-cell; width:9000px;/*宽度大到屏幕宽度即可*/ /*hack手段，针对IE6、7*/ *display:inline-block; *width:auto; height:100px; background:pink; } </style> </head> <body> <div class="floatLeft"></div> <div class="floatRight"></div> <div class="bfcContent bfcContentStl"></div> </body></html>
信じられない場合は、自分でコードを実行し、ブラウザを起動して見てください。