ホームページ >ウェブフロントエンド >htmlチュートリアル >Xinxing は、CSS_html/css_WEB-ITnose のフローティング問題の解決に完全に役立ちます
Xinxing は、CSS_html/css_WEB-ITnose のフローティング問題の解決に完全に役立ちます
- WBOYオリジナル
- 2016-06-24 12:01:081070ブラウズ
フローティングは CSS レイアウトで通過しなければならないハードルです。フローティングに慣れていない場合、CSS のレイアウトは div と組み合わせたものです。これはブロックレベルの要素です。以前のブログ投稿で紹介しましたが、私のスタイルが気に入ったら、検索してみてください。
さて、本題に入りましょう。いわゆるフローティングは CSS 属性 float で定義できます。たとえば、float:left は左へのフローティングを意味し、float:right は右へのフローティングを意味します。非フローティングの例。最初はこの HTML ファイルです。このファイルの内容は次のとおりです。
<html><head> <link rel="stylesheet" type="text/css" href="my.css"></head><div id = "demo1">区块1</div><div id = "demo2">区块2</div><div id = "demo3">区块3</div><div id = "demo4">区块4</div></html>次に、対応する my.css ファイルを作成します。内容は次のとおりです。
#demo1{ background-color: #933; height: 100px;width:300px; }#demo2{ background-color: #0F0; height:60px;width:200px;}#demo3{ background-color: #F00; height: 140px;width: 80px;}#demo4{ background-color: #CCC; height: 80px;width: 180px;} 次に、この時点でのインターフェイスは次のようになります: 次に、2 番目の div で右にフロートさせ、次の情報を追加します。つまり、
#demo2{ float: right; background-color: #0F0; height:60px;width:200px;} 上記のデモ 2 に変更を加えただけです。次のような効果があります: 说 面
「通常のストリーム」とは何かについて話しましょう。おそらく、これは初心者の友人を特に混乱させるトピックです。いわゆる一般的な流れは、上から下へ右へ続くものです。 HTML 要素はすべて通常のフロー内にあり、要素が一度フロートすると、通常のフローからは外れます。たとえば、ブロック 2 が右に浮動している場合、その上の要素が検索されます。前の要素はブロック 1 であり、ブロック 1 は通常のストリーム内の要素であるため、ブロック 2 はブロック 1 と同じになります。通常のフローは上下の位置を決めるだけですが、フローティングは上下の位置が決まると次は左右の位置になります。右。ブロック 3 は前の要素を検索し、その前の要素が標準ストリーム内の要素であることを検出します。そのため、ブロック 1 の下端に合わせて下方向に配置されます。おそらく誰かが尋ねるでしょう。ブロック 2 が左に浮く場合、Demo2 の Float プロパティを LEFT に変更し、ブロック 3 の幅を変更して幅を広くします。
上の図の説明は比較的わかりやすいので、言葉での説明は省略します。 2 つのブロックが一緒に浮かんだらどうなるのかと尋ねる人もいるかもしれません。まず、すべてが右側に浮いている状況を見てみましょう:
ここの幅は十分に広いので、このレイアウトは完全に収まりますが、幅を狭くするとどうなるでしょうか?以下の図を見てください:
実際、これは非常に理解しやすいので、左に伸ばし続けたらどうなるでしょうか?次の状況が発生します:
実際、幅が十分に広い限り、ブロック 3 はブロック 2 の下ではなく左側にありますが、幅が低すぎる場合は当てはまりません。非常に無力です。ブロック 2 の一番下まで走り、右から新しい列を開始します。
したがって、これは次の文に要約できます: 「ブラウザは最初に通常のフローでブロックを配置します。非常に単純で、上から下に配置するだけです。フローティング要素の場合は、通常のフローにある要素を確認し、その下をその上とみなしてフローティング ルールに従って配置し続けます。は通常のフローであるため、フローティング要素は通常のフローの要素をカバーします。
このセクションはここです。 。 。 もう一度浮いているものから始めましょう。 。 。 。