CSS document streams and block-level elements and inline Elements

CSS document streams and block-level elements (blocks) and inline elements (Inline). I have read many books, read many articles, and read a lot of basic CSS layout knowledge, comparison surface. I have read o'reilly's <CSS authoritative guide> and found that the document stream concept mentioned in it makes me very sensitive. what's worse is that the book does not explain what the document stream is. Maybe the author thinks this is so simple that it is not worth mentioning. but I think this concept is too important. after understanding it, a bunch of CSS layout theories have become easy to understand and understand the rationality of the CSS design. so I guess I should add an experiment to come up with a saying. if any error occurs, it is normal.

Document Stream

The form is divided into rows from top to bottom, and the elements are discharged from left to right in each row, that is, the document stream.

Each non-floating block-level element occupies only one row, and the floating element floats at one end of the row as required. If the current row cannot accommodate it, a new row will be floated.

An inline element does not exclusive to a row. Almost all elements (including block-level, inner-join, and list elements) can generate child rows for placing child elements.

In three cases, elements are separated from the document stream, which are floating, absolute, and fixed. but the floating element in IE also exists in the Document Stream (which makes me think so reasonable)

Floating elements do not occupy any normal Document Stream space, while the positioning of floating elements is based on the normal Document Stream, and then extract from the document stream and move it as far as possible to the left or right. The text content is surrounded by floating elements. When an element is extracted from a normal Document Stream, other elements in the Document Stream ignore this element and fill in its original space.

The root of the confusing concept of floating is the interpretation of the theory by the browser. It can only be said that many people use IE as the standard, but it is not.

Based on the document stream, we can easily understand the following positioning modes:

• Relative positioning,
  Offset relative to the position of the element in the Document Stream, but retain the original placeholder.
• Absolute positioning,
  That is, it is completely out of the document stream, and offset relative to the last parent element of the non-static value of the position attribute
• Fixed positioning,
  That is, it is completely out of the Document Stream, which is offset relative to the video area.

I still have a few questions.

1. As an inline element of one of the three basic elements, what is the main difference between it and block-level elements?
2. What should I do when the clear attribute is set to the right value? It seems that the experiment is always different from the theory.

What does inline element mean? What is a block-level element.

The text in the CSS authoritative guide shows that any visible element that is not a block-level element is an inline element. Its performance is in the form of "Row layout", where "Row layout" means that its performance is always displayed in rows. For example, when we set an inline element border-bottom: 1px solid #000, it is represented by repeating each line, and there will be a black fine line under each line. If it is a block-level element, the displayed black line will only appear below the block.

Elements such as P, H1, or Div are often referred to as block-level elements, which are displayed as a piece of content; elements such as strong and span are called intra-row elements whose content is displayed in the row, that is, "line box ". (You can use display = block to convert an element in the row into a block element. Display = none indicates that the generated element does not have a box at all, nor does it show any element, and does not occupy space in the Document)

A: an element in a row can only be placed in a row. A block-level element is a four-square block that can be placed anywhere on the page.

B: To put it bluntly, an element in a row is like a word. A block-level element is like a paragraph. If it is not defined separately, it will appear on an independent line.

C: general block-level elements, such as paragraphs <p> and question mark

D: The block-level element-less feature is that each block-level element is displayed from a new line, and the subsequent element-less elements must be displayed in another line.

E: <span> the CSS definition belongs to an element in the row, and <div> is a block-level element.

Those who have learned CSS can understand it once they hear it. It is not easy for new users to understand. I am mainly familiar with new users!

Using the word container makes it easier to understand their existence and usage. The element in the row is equivalent to a small container, while <div> is equivalent to a large container, of course, a large container can be placed in a small container. <Span> it is a small container. You may have a preliminary impression in your mind. If we want to install some clear water in a large container. But how can I install some ink in it? It's easy. Don't we just take out the small container and mount it with ink and put it in the clear water of the large container.

Let me give you a simple example:

<Div> Shanghai Website production -www.86215.com </div>

I want to use CSS to define the style of the letter C, so we can use <span>.

<Div> Shanghai Website Design-<span> http://www.86215.com </span> W3C Standard </div>

Block elements are generally container elements of other elements.

A block element generally starts from a new line. It can accommodate inline elements and other block elements. A common block element is the section tag 'P ". The "form" block element is special. It can only accommodate other block elements.

If no CSS function is available, the block elements are arranged in the order of each row. With CSS, we can change the default layout of HTML and place block elements in the desired position. Instead of just starting another line. It should be noted that table labels are also a type of block elements. Table based layout and CSS based layout are from average users (excluding persons with visual impairment and blind people) the two la s have no difference except the page loading speed. However, if a common user inadvertently clicks the page source code button, the difference between the two is very large. The CSS layout page source code, designed based on a good refactoring concept, should at least allow common users without web development experience to quickly read and understand the content. From this perspective, CSS layout code should have a better aesthetic experience.

You can think of the block container element Div as a box, or it is easier to understand if you have played the clipboard. First, we cut down the necessary articles from various newspapers and magazines. Each piece of cut is a block. Then we pasted the paper block to a blank new paper with glue based on our typographical intent. This forms your own unique digest Express. As an extension of technology, webpage layout design follows the same pattern ..

Inline elements are generally basic elements based on the semantic level (semantic. Inline elements can only contain text or other inline elements. Common inline elements are "".

Both block element and inline element are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start from a new line. After CSS control is added, the differences between block elements and inline elements will not be the same. For example, we can add the inline element cite to the display: block attribute so that it also has attributes starting from the new line each time.

The basic concept of a variable element is to determine whether the element is a block element or an inline element based on the context relationship. The variable element still belongs to the above two element categories. Once the context relation determines its category, it must follow the block element or Inline element rule restrictions. For rough element classification, see the full text.

For the Chinese name of inline elements, there are multiple inline elements, embedded elements, in-row elements, and straight forward elements. Basically, there is no unified translation. What do you call love. When we mention inline elements, we will think of a display attribute: Display: inline; which can fix the famous IE Double Floating boundary.

Block Element)

* Address-address
* BLOCKQUOTE-block reference
* Center-align Blocks
* Dir-directory list
* Div-common block-level labels are easy, and they are also the main labels of CSS layout.
* Dl-definition list
* Fieldset-Form Control Group
* Form-interactive form
* H1-large title
* H2-subtitle
* H3-Level 3 title
* H4-4 level title
* H5-Level 5 Title
* H6-6 titles
* HR-horizontal Separator
* Isindex-input prompt
* Menu-Menu list
* Optional content of noframes-frames. (content in this block is displayed in browsers that do not support frame.
* NoScript-optional script content (this content is displayed in browsers that do not support scripts)
* Ol-sorting form
* P-paragraph
* Pre-format text
* Table-table
* Ul-non-sorted list

Inline Element)

* A-anchor
* Abbr-abbreviation
* Acronym-First word
* B-bold (not recommended)
* BDO-bidi override
* Big-large font
* Br-line feed
* CITE-Reference
* Code-computer code (required when source code is referenced)
* Dfn-define a field
* Em-emphasis
* Font-font setting (not recommended)
* I-italic
* IMG-Image
* Input-input box
* KBD-defines the keyboard text
* Label-Table label
* Q-short reference
* S-hyphen (not recommended)
* Samp-Defines sample computer code
* Select-select a project
* Small-small font text
* Span-commonly used inline containers that define text blocks
* Strike-dashes
* Strong-highlighted in bold
* Sub-subscript
* Sup-superscript
* Textarea-multi-line text input box
* Tt-telex text
* U-underline
* Var-define variables

Variable Element

The variable element determines whether the element is a block element or an inline element based on the context.
* Applet-Java Applet
* Button-button
* Del-delete text
* IFRAME-inline Frame
* Ins-inserted text
* Map-image block (MAP)
* Object-object
* Script-client script