HTML5 ドキュメントフローとは何を意味しますか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

HTML5 ドキュメントフローとは何を意味しますか?

青灯夜游

Jun 01, 2022 pm 04:57 PM

html html5

HTML5 では、ドキュメントフローは「通常のフロー」とも呼ばれ、要素のレイアウトプロセス中にデフォルトで左から右、上から下への要素の流れの配置を指し、最終的な形式は行を分割します。を上から下の行に分割し、各行の要素を左から右に配置します。文書フローから脱却する方法: 1. フロート、2. 位置の配置。

HTML5 ドキュメントフローとは何を意味しますか?

#このチュートリアルの動作環境: Windows7 システム、HTML5 バージョン、DELL G3 コンピューター

1.書類の流れ？

「流れ」、水の流れや流れなど、私たちの生活の中でよく聞く言葉です。水が高いところから低いところへ流れるのと同じように、ドキュメントフローはブラウザ上で「流れる」HTML 要素と考えることができます。ブラウザの上部が川の源、ブラウザの下部が川の終点です。

いわゆるドキュメントフロー (通常のフロー、「通常のフロー」とも呼ばれる) は、要素の植字とレイアウトのプロセスを指します。要素は、左から右、上から下に自動的にこのパターンに従います。配置。

ブラウザは HTML ドキュメントをレンダリングするときに、上からレンダリングを開始し、要素に必要なスペースを割り当てます。各ブロックレベルの要素は個別の行を占めます。インライン要素は、見つかるまで水平方向に順番にレンダリングされます。境界に到達すると、次の行の開始点に切り替えてレンダリングを続行します。したがって、現時点では、ブロックレベル要素とインライン要素について話さなければなりません。

2. ブロックレベル要素とインライン要素

ブロックレベル要素: 名前が示すように、この要素は「ブロック」です。したがって、ブロックとして、独自の幅と高さを持つ必要があります。そしてそれはさらに横柄です. 各ブロックレベル要素はデフォルトで 1 行の高さを占有します. ブロックレベル要素を行に追加した後は, 他の要素を追加できません (float の後を除く). 通常はコンテナとして使用されます.ブロックレベルの要素は、from、select、textarea、h1-h6、table、button、hr、p、ol、ul などです。

上記のコンテンツと組み合わせると、ブロックレベル要素には次の特徴があります:

各ブロックレベル要素は独自の行を占有します。
要素の高さ、幅、行の高さ、マージンを設定できます。
要素の幅が設定されていない場合、デフォルトで親要素の幅が設定されます。

インライン要素: 明らかに、この要素は行内に存在し、他のインライン要素と行を共有できます。一般的なインライン要素には、span、input、a、em、strong、b、br、img、select、button などが含まれます。

インライン要素の特徴は次のとおりです。

各インライン要素は他のインライン要素と行を共有でき、隣接するインライン要素は同じ行に配置されます。 line 、行にスペースがなくなるまで行が変更されます。
インライン要素の幅と高さの設定は無効であり (ここには落とし穴があります。以下をお読みください)、幅は要素の内容に応じて変化します。
行内の水平方向のpadding-leftとpadding-rightはマージン効果を生成しますが、垂直方向のpadding-topとpadding-bottomはマージン効果を生成しません。

##3. 置換要素と非置換要素注意深い人なら誰でも、 HTML5 ドキュメントフローとは何を意味しますか? 、などもインライン要素であり、幅と高さは明らかに設定できるため、ここで問題が発生します。実際、すべてのインライン要素に幅と高さを設定できないわけではありません。

インライン要素も、置換要素と非置換要素の 2 種類に分類されます。

要素の置換:

ブラウザは、タグと属性に基づいて要素の特定の表示コンテンツを決定します。一般的なものには、 HTML5 ドキュメントフローとは何を意味しますか? 、< ;input> などがあります。 ;、、、。たとえば、ブラウザはタグの src 属性に基づいて画像を表示します。入力ボックスやボタンは、の type 属性に基づいて表示され、幅と高さを設定できます。

非置換要素:

コンテンツがユーザーに直接表示される要素は、非置換要素と呼ばれます。一般的な要素には、、、などたとえば、は、開始タグと終了タグの内容をブラウザ上に直接表示します。

4. ドキュメントフローから切り離される

いわゆるドキュメントフローから切り離されるとは、要素が通常のレイアウトや組版 (通常のドキュメントフローから切り離される) であることを意味します。 ). 他のボックスが配置されている場合は、それを見ていないかのように扱われます (一生アドバイスをする必要はありません). 2 つの位置は重なっても問題ありませんが、依然として存在します。 DOM ツリー内。

では、要素がドキュメントフローから外れる原因となる状況は何でしょうか?

1. float によって生成された Float

float を使用してドキュメントフローから離脱する場合、他のボックスはこの要素を無視しますが、他のボックス内のテキストは引き続き無視されます。この要素を囲むように道を作ります。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            float: left;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div>这是demo1的文本</div>
    <div>这是demo2的文本</div>
</body>
</html>

ログイン後にコピー

コード実行効果:

HTML5 ドキュメントフローとは何を意味しますか?

2.position:absolute;

absolute は絶対配置であり、要素は絶対配置されます。最初の非静的親要素を参照として使用します。非静的親要素がない場合は、本文が参照として使用されます。

次は例です:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
            position: absolute;
            top: 50px;/*给demo2一个绝对定位，并且距离body顶部 50px*/
        }
        .demo3{
            width: 200px;
            height: 200px;
            border: 5px solid black;
        }
        body{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div>这是demo1的文本</div>
    <div>这是demo2的文本</div>
    <div>这是demo3的文本</div>
</body>
</html>

ログイン後にコピー

コードの効果は次のとおりです:

HTML5 ドキュメントフローとは何を意味しますか?
2 番目の p が相対的に下に移動していることがわかります。本文の上部 50px;

3. 位置: 固定;

ドキュメントフローから完全に分離され、ブラウザウィンドウを基準にして配置されます。はブラウザウィンドウに固定されているため、スクロールバーをどのようにドラッグしても、ブラウザウィンドウ内での位置を変更することはできません。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
        .demo2{
            width: 200px;
            height: 100px;
            border: 5px solid green;
            position: fixed;
            right: 50px;
        }
        .demo3{
            width: 200px;
            height: 200px;
            border: 5px solid black;
        }
        body{
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div>这是demo1的文本</div>
    <div>这是demo2的文本</div>
    <div>这是demo3的文本</div>
</body>
</html>

ログイン後にコピー

HTML5 ドキュメントフローとは何を意味しますか?

文書の流れを誰もが理解できるように、ストーリーを語り始めましょう:

A ハンサム男の子 (p1) とかわいい女の子 (p2)、彼らはお互いに好きでした、ある日、彼らは一緒になり、それ以来幸せな生活を送りました...
どうしてこのような物語になるのでしょうか (イメージしてください)

時間が経つにつれ、あるもの(浮遊、固定、絶対)の影響で、相手にも欠点が多く完璧ではないことが分かり、ある日、ついにお互いに我慢できなくなってこう言いました。、「別れよう！」「P1は、バラバラ、別れました（p1は文書フローから抜け出しました）と言いました。」「私が死んだものだと思ってください」とp1は言いました。少年紙 p1 と少女紙 p2 はまだこの世界でそれぞれの人生を生きていますが (DOM ツリーには p1 と p2 の両方がまだ存在します)、彼らは心の中でお互いを死なせています (ボックスを配置すると、ふりをします)あなたはそれを見ていませんでした）。血なまぐさい物語は終わりました。

関連する推奨事項:「html ビデオチュートリアル」

以上がHTML5 ドキュメントフローとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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