BFC 幅適応型layout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

BFC 幅適応型layout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

アダプティブレイアウトといえば、「幅アダプティブレイアウトの紹介」という記事で学びました。当時の中心的なアイデアは、主に 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>

ログイン後にコピー

信じられない場合は、自分でコードを実行し、ブラウザを起動して見てください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。