What does html5 document flow mean?

In HTML5, document flow is also called "ordinary flow", which refers to the flow arrangement of elements from left to right and top to bottom by default during the element layout process; and the final form Divide the rows into rows from top to bottom, and arrange the elements in each row from left to right. Methods to break away from the document flow: 1. Float; 2. Position positioning.

The operating environment of this tutorial: windows7 system, HTML5 version, DELL G3 computer

1. What is document flow ?

"Flow", we often hear this word in our lives, such as water flow and current. Just like water flowing from high to low, we can think of document flow as HTML elements "flowing" on the browser. The top of the browser is the source of the river, and the bottom of the browser is the end of the river.

The so-called document flow (normal flow, also known as "normal flow") refers to the process of element typesetting and layout. Elements will automatically follow this pattern from left to right and top to bottom. Streaming arrangement.

When the browser renders the HTML document, it starts rendering from the top and allocates the required space to the elements. Each block-level element occupies a separate line. Inline elements are rendered horizontally in order until they are encountered in the current line. When it reaches the boundary, it then switches to the starting point of the next line and continues rendering. So at this time we have to talk about block-level elements and inline elements.

2. Block-level elements and inline elements

Block-level elements: As the name suggests, this element is "a block", so as a block, It should have its own width and height. And it is more overbearing. Each block-level element occupies one row of height by default. After adding a block-level element to a row, other elements cannot be added (except after float). It is generally used as a container. Common block-level elements are: from, select, textarea, h1-h6, table, button, hr, p, ol, ul, etc.

Combined with the above content, block-level elements have the following characteristics:

• Each block-level element occupies its own line.

• The height, width, line height and margin of the element can be set.​

• If the width of the element is not set, it defaults to the width of the parent element.

Inline elements: Obviously, this element exists within a line and can share a line with other inline elements. Common inline elements include: span, input, a, em, strong, b, br, img, select, button, etc.

Then the characteristics of inline elements are as follows:

• Each inline element can share a line with other inline elements, and adjacent inline elements will be arranged in the same line , until there is no more space left in the row, the line will be changed.

• Setting width and height for inline elements is invalid (there are pitfalls here, please read below), and the width changes with the content of the element.

• Padding-left and padding-right in the horizontal direction within the line will produce margin effects, but padding-top and padding-bottom in the vertical direction will not produce margin effects.

##3. Replacement elements and non-replacement elements

Everyone who is careful must have discovered, like , , , , etc., they are also inline elements, and the width and height can obviously be set, so there is a problem here. In fact, not all inline elements cannot have width and height set. <p></p>Inline elements are also divided into two types: replaced elements and non-replaced elements. <p></p> <p>Replace elements: <strong></strong></p>The browser determines the specific display content of the element based on its tags and attributes. Common ones include: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/e9541e2cf7ae69c9fbcdeb3abfd7c0bf-0.jpg" class="lazy" alt="What does html5 document flow mean?" >, < ;input>, <select>, <textarea>, <object>. For example, the browser displays images based on the src attribute of the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/e9541e2cf7ae69c9fbcdeb3abfd7c0bf-0.jpg" class="lazy" alt="What does html5 document flow mean?" > tag. The input box or button is displayed based on the type attribute of <input>. Their width and height can be set. <p></p> <p>Non-replaceable elements: <strong></strong></p> Elements whose content is directly displayed to the user are called non-replaceable elements. Common ones include: <span>, <p>, <label>etc. For example, <span> will display the content in the opening and closing tags directly on the browser. <p></p> <h2>4. Detached from the document flow<strong></strong> </h2>The so-called detached from the document flow means that the elements are detached from the ordinary layout and typesetting (ordinary document flow). When other boxes are positioned , it will be treated as if you haven’t seen it (you don’t have to give advice for the rest of your life). It’s okay for the two positions to overlap, but they still exist in the DOM tree. <p></p>So what are the situations that will cause elements to break out of the document flow? <p></p> <p>1. Float generated by float <strong></strong></p>When using float to break away from the document flow, although other boxes will ignore this element, the text in other boxes will still be this element. Make way for it to wrap around the element. <p> Here is the code: <br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!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></pre><div class="contentsignin">Copy after login</div></div><p> Code running effect: </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/e9541e2cf7ae69c9fbcdeb3abfd7c0bf-0.jpg" class="lazy" alt="What does html5 document flow mean?" title=""/></p><p><strong>2. position:absolute; </strong></p><p>absolute is absolute positioning, absolutely positioned elements Take the first non-static parent element as a reference. If there is no non-static parent element, the body is used as the reference. </p><p>The following is an example: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!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></pre><div class="contentsignin">Copy after login</div></div><p>The code effect is as shown: </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/a1a9f67f7a581a8033a5e9a8b6bc1449-1.jpg" class="lazy" alt="What does html5 document flow mean?" title=""/><br/> We can see that the second p has moved downward relative to the top of the body 50px; </p><p><strong>3. position: fixed; </strong></p><p> Completely separated from the document flow, positioned relative to the browser window, that is, the p is fixed on the browser window , no matter how we drag the scroll bar, we cannot change its position in the browser window. </p><p>The following is the code: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!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></pre><div class="contentsignin">Copy after login</div></div></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/a1a9f67f7a581a8033a5e9a8b6bc1449-2.jpg" class="lazy" alt="What does html5 document flow mean?" title=""></p> <p> Let’s start telling a story to help everyone understand the flow of documents: </p> <p>A handsome boy (p1 ) and a cute girl (p2), they liked each other, one day, they got together and lived a happy life from then on... <br> How could the story be like this (picture it) </p> <p>As time went by, under the influence of certain things (float, fixed, absolute), they discovered that the other party had many shortcomings and was not perfect. One day, they finally couldn't stand each other and said, "Let's break up!" "P1 said, balabala, they broke up (p1 got out of the document flow). "Just think of me as dead," p1 said. Although the boy paper p1 and the girl paper p2 are still living their own lives in this world (both p1 and p2 still exist in the DOM tree), they let each other die in their hearts (when the box is positioned, it will Pretend you didn't see it). The bloody story is over. </p> <p>Related recommendations: "<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html video tutorial</a>"</p></span></label></p></span></object>

The above is the detailed content of What does html5 document flow mean?. For more information, please follow other related articles on the PHP Chinese website!