Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what is the flow of CSS documents". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The arrangement of plain text, the document stream is like our text content, all the text will be arranged next to each other, and if it reaches the boundary, it will be arranged on a new line. Of course, if you hit enter or press the space bar, it will generally be regarded as a word spacing, because there is a distance between each word in English, unlike every Chinese character in Chinese. So no matter how many hits you hit, no matter how many spaces you hit. Programs all think that there is only a space distance between words. We call this phenomenon blank folding. The red arrow in the picture below is the effect that we hit enter and hit the space.

The arrangement of text and pictures

Because of the typesetting of pictures and texts, the width of the picture is a whole. Unlike the text can be separated in the middle, so when the picture and text together, we will find that the picture as the content of the document stream is also the same as a text element, close to the previous text, the following text also follows the picture. But if the rest of the line is not enough for the width of the picture, it will automatically change the line.

Because the picture is the same as a text element, therefore, the height of the picture is greater than the height of the text, it will push up the line, the higher the picture, the higher the line. Text on the same line will be at the bottom of the picture by default. If you want the text to be relatively in the middle of the picture, then you need to set a CSS style for the picture vertical-align: middle; note that it must be set for the picture, not for the text.

Of course, if we set up two pictures, notice the gap between the two pictures below, because

There is a new line between them. According to the characteristics of the above text, there must be a space here.

How to solve this problem? there are many ways to start. The simplest thing is to connect the two tags and not to change the line.

Block elements and inline elements

What we said just now are all inline elements, that is, after the content is added, it will be automatically placed on a line, and if the remaining width of the page is smaller than the element to be placed, it will automatically wrap.

In addition to text and pictures, there are other HTML tags that are also inline elements. For example:

Inline element

... Inline element

... Link

New line

... Thickening

... Thickening

Picture

... Superscript

... Subscript

... Italic

... Italic

... Delete Lin

... Underline

Text box

... Multiline text

... Drop-down list

All the above inline elements will exist on the same line if they are written directly in the code. Of course, the newline br will put all the following elements on another line.

Sometimes we want a content to be able to travel on its own. So we have a piece of element. Block elements are separated into rows, which are clearly distinguished from inline elements.

For example:

Address text

... In the middle

... Title level

... Title level 2

... Title level 3

... Title level 4

... Title level 5

... Title level 6

Horizontal dividing line

... Paragraph

... Pre-formatted

... 5 characters before and after paragraph indent

... Unordered list

... Ordered list

... Definition list

... Form

... Form

... Block container

What are the specific differences between block elements and inline elements.

Inline element

Block element

Peer

Enter in-line elements and they will go together automatically.

Enter block-level elements, automatically wrap, and occupy a separate line, other in-line elements will not go with it.

Set width and height

The width and height of some elements in the line cannot be set, such as span container, a hyperlink tag, etc., of course, some width and height can be changed through the CSS style, such as input,img,textarea and other non-text tags

The width and height of the block element can be set directly. If it is not set, it will automatically set 100% according to the width of the parent container of the element. The height is stretched according to the content. If there is no content, the default height of the block element is 0, which is very important.

Conversion between inline elements and block elements

Inline elements and block elements can be converted to each other, for example:

(1) convert inline elements to block elements

This is the default inline element

This is after conversion. We find that the text block wraps the line and occupies a separate line, where we set display:block

(2) convert block elements to inline elements

This is the default div block element style

When set to an inline element. We found that width and height failed. Once a block-level element is set to an inline element, the originally set width and height will become invalid

(3) convert block elements and inline elements to inline block elements

Sometimes we want containers (not textArea or input) to have both width and height and can be arranged in the same row, which we can convert to inline block containers. In particular, we want to put multiple containers with different widths and heights on the same line, and we can adjust their position through margin (note: inline elements cannot adjust their vertical position through margin, because they are all on the same line), so inline block elements are very necessary.

Block elements become inline block elements

Inline elements change into inline block elements

We found that both effects were the same.

You may think this is great, we can use the mixed arrangement of graphics and text to make a web page, but notice that we have converted into inline block elements, they are in the line, any change to the marginTop will open the line height. It's gonna be like this:

This is the end of the content of "what is the CSS document flow". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.