コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > div フローティング レイヤーとデフォルトの div レイヤーの間にはどのような関係がありますか?

div フローティング レイヤーとデフォルトの div レイヤーの間にはどのような関係がありますか?

php中世界最好的语言
リリース： 2017-11-22 17:45:54
オリジナル
2095 人が閲覧しました

フローティングと言えば まず第一に、なぜフローティング スタイルを設定するのかという概念を理解する必要があります。 DIVobjectボックスを左または右にレイアウトしたいからです。このようにして、Web ページをより美しくインタラクティブにすることができます。では、フローティング DIV とデフォルト DIV の違いは何でしょうか。見てみましょう

div フローティング レイヤーと div レイヤーの違いは何ですか? CSS における関係は何ですか?

まず、DIV フローティング レイヤーと DIV レイヤーはどちらも、一般的に CSS の組み合わせを指します。 WebページのレイアウトにはスタイルシートとDIVタグが使用されます。

div レイヤーには通常 div フローティング レイヤーが含まれます。 div フローティング レイヤーは div が

css フローティング スタイルで追加されていることを示すため、float フローティング スタイルがなければ div フローティング レイヤーと呼ばれます。フローティング効果なので、フローティングスタイルが追加されていない場合、div にはフローティング効果がありません。これはフローティングレイヤーと呼ばれます。もちろん、span、h1、ul、li などのタグもレイヤーですが、span、h1、ul、li などのタグは div ほど頻繁に使用されないため、一般的に div はシンボル名として使用されます。

次に、通常レイヤーとは何ですか、フローティングレイヤーとは何ですか? div css フローティングレイヤーを使用する理由。

完全な DIV+CSS サンプル HTML コードは次のとおりです

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div层与浮动层</title> 
<style> 
.div{ width:400px; height:100px} 
.div-a{ float:left; border:1px solid #F00; width:100px; height:80px} 
.div-b{ float:right; border:1px solid #00F; width:100px; height:80px} 
</style> 
</head> 
<body> 
<div class="div"> 
<div class="div-a"></div> 
<div class="div-b"></div> 
</div> 
</body> 
</html>
ログイン後にコピー

オブジェクト「.div」は float に設定されておらず、「.div-a」は左にフロート (float:left) に設定されており、「. div-b" は右に浮動するように設定されます (float :right)。

レイヤーとフローティングレイヤーのまとめ


上記の例では、「.div」オブジェクトは通常のレイヤーであり、デフォルトではフローティング効果のないレイヤーになっています。Webページのコンテンツが左側にあるため、左側のこのレイヤーを参照してください。ただし、実際には DIV ボックス レイヤーのスタイルを設定することはできません。オブジェクト内の子「.div-a」と「.div-b」はフローティングに設定されているため、上からわかるように、一方は左にフロートし、もう一方は右にフローティングします。 「.div」ボックス。通常レイヤーとフローティングレイヤーの違いは、CSSフロートスタイルが設定されているかどうかです。

フローティングの違いについては非常にわかりやすく紹介されています。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事をご覧ください。

関連書籍:

HTMLのspanタグの使い方

htmlの