CSS block-level elements, inline element concepts

CSS document flow with block-level elements (block), inline elements (inline), before flipping through a lot of books, read a lot of articles, see what is fragmented CSS layout basic knowledge, comparison surface. Looking at the "CSS Authority Guide" of O ' Reilly, I was very sensitive to the concept of the document flow that was mentioned. The bad thing is that the book doesn't explain what the flow of the document is, and perhaps the author thinks it's too simple to be worth mentioning. But I think this concept is really important. Understand it, a lot of CSS layout theory has become easy to understand, and understand the design of CSS is reasonable.

Document Flow

The document flows by dividing the form from top to bottom into rows and emitting elements from left to right in each row.

Each non-floating block-level element is exclusive to one row, and the floating element floats at one end of the row as specified. If the current line does not fit, a new row is floated again.

Inline elements also do not monopolize a single row. Almost all elements, including block-level, inline, and list elements, can generate child rows for placing child elements.

There are three situations that will cause elements to flow out of the document, floating, absolute positioning, fixed positioning. But floating elements in IE also exist in the flow of documents (which makes me feel reasonable ><).

Floating elements do not account for any normal flow of documents, and the positioning of floating elements is based on a normal flow of documents, then extracted from the document stream and moved as far as possible to the left or right. The text content surrounds the floating element. When an element is extracted from the normal document stream, the other elements still in the document flow will ignore the element and fill his original space.

Floating concepts are confusing because of the browser's interpretation of the theory. Can only say that many people use IE to do the standard, in fact it is not.

Based on the flow of documents, we can easily understand the following positioning modes:

Relative positioning, which is offset relative to the position of the element in the document flow. But retain the original placeholder.

Absolute positioning, which is completely out of the document flow, offset from the most recent parent element of the position property's non-static value.

Fixed positioning, that is, completely out of the document flow, offset relative to the viewport.

Several questions

• An inline element as one of three basic elements. What is the main difference between it and block-level elements?
• How do I understand the clear property when I take the right value? The seemingly experimental situation is always inconsistent with the theory.
• What does an 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 the "Row layout" form, where the "row layout" means that its representation is always displayed as rows. For example, we set an inline element border-bottom:1px solid #000, and it behaves as if it were repeated in each line, with a thin black line underneath each row. If it is a block-level element then the black line shown will only appear below the block.

Elements such as p, H1, or div are often referred to as block-level elements, which appear as a piece of content; strong. Elements such as span are called inline elements, and their contents are displayed in rows, or inline boxes. (You can use Display=block to convert inline elements into block elements, display=none means that the generated element doesn't have a box at all, nor does it show elements, not occupy space in the document)

• Inside the line is the element within a line, which can only be placed within a row, and a block-level element, which is a square block, which is placed anywhere on the page.
• To put it bluntly, the inline element is like a word; a block-level element is like a paragraph, and if no additional definition is defined, it appears on its own line.
• General block-level elements such as paragraph <p>, title
• The significant feature of block-level vegan is that each block-level element is displayed starting from a new line, and the subsequent elements need to be displayed on a separate line.
• <span> belongs to an inline element in the CSS definition, and <div> is a block-level element.

For those who have studied CSS, you can understand it as soon as you hear it. Can not be easy for beginners to understand, I am mainly to the novice said through ripe point bar!

The word "container" will make it easier to visualize their existence and purpose, the elements within the line are quite a small container, and the <div> is equivalent to a large container, and a large container can of course put a small container. <span> is a small container, so that you may have a preliminary impression in your mind, if we want to fill a large container with some water. But I also want to put some ink in the How to do? Very simply, we take the small container out of the ink and put it into the large container of water in it.

Block element is generally a container element of other elements

Block elements are generally started from the new row, which can accommodate inline elements and other block elements. The common block element is the paragraph label ' P '. The block element of "form" is special, and it can only be used to accommodate other block elements.

If there is no CSS, the block elements are ordered to go down in a row each time. With CSS, we can change the default layout of this HTML and put the block elements where you want them. Instead of every stupid other line. It should be noted that table tags are also one of the block elements, table based layout and CSS based layout from the perspective of the general user (not including visually impaired, blind, etc.) of the two layouts, in addition to the page loading speed differences, there is no other difference. But if ordinary users inadvertently point to the page Source code button, the difference between the two is very large. Based on the concept of good reconstruction of CSS layout page source code, at the very least, can let no web development experience of ordinary users to quickly read the content. From this point of view, CSS layout code should have a better aesthetic experience.

You can think of the block element div as a box, or if you've played a clip, it's easier to understand. We first cut down the articles we need from various newspapers and magazines. Each cut is a block. Then we put the pieces of paper on a blank new piece of paper according to our own layout intent. This will create your own unique digest letters. As an extension of technology, Web page layout design also follows the same pattern.

Inline elements (inline element) are generally based on semantic level (semantic) basic elements. Inline elements can only hold text or other inline elements, common inline element "a".

Both the block element and the inline element are concepts in the HTML specification. The basic difference between a block element and an inline element is that the block element generally starts from the new row. When CSS control is added, this attribute difference between the block element and the inline element does not become a difference. For example, we can completely add an inline element cite to a property such as Display:block, so that he also has properties that start from the new line each time.

The basic concept of a mutable element is that he needs to determine whether the element is a block element or an inline element based on the context relationship. Mutable elements are also part of the above two categories of elements, and once the context determines his category, he follows the rules of block elements or inline elements. The approximate elements are categorized in full.

The Chinese term for inline element has a variety of inline elements, inline elements, in-line elements, and straight-forward elements. Basically there is no unified translation, love how to call it. In addition to the inline element, we think that the property of a display is display:inline, which fixes the famous IE double floating boundary problem.

Block element

• Address-Addresses
• BLOCKQUOTE-Block Reference
• Center-lifting Alignment block
• DIR-List of directories
• Div-Common block-level easy, is also the main tag of CSS layout
• DL-Definition List
• Fieldset-form control Group
• Form-Interactive Form
• H1-Big title
• H2-Subtitle
• H3-3 level headings
• H4-4 level headings
• H5-5 level headings
• H6-6 level headings
• HR-Horizontal Divider Line
• Isindex-input prompt
• menu-List of menus
• Noframes-frames Optional content (Display this chunk content for browsers that do not support frame)
• NoScript-Optional script content (this content is displayed for browsers that do not support script)
• OL-Sorted list
• P-Paragraph
• Pre-formatted text
• Table-Tables
• UL-Non-sorted list

Inline elements (inline element)

• A-anchor point
• ABBR-Abbreviation
• Acronym-the first word
• B-Bold (not recommended)
• Bdo-bidi Override
• Big-Large font
• BR-line break
• Cite-citation
• Code-Computer codes (required when referencing source)
• DFN-Defining fields
• EM-emphasize
• Font-typeface settings (not recommended)
• I-Italic
• IMG-Images
• Input-Enter box
• KBD-Define keyboard text
• Label-Table Label
• Q-Short Reference
• S-Medium dash (not recommended)
• Samp-Define sample computer code
• Select-Project Selection
• Small-Small font text
• Span-a common inline container that defines chunks within a text
• Strike-Medium Dash
• Strong-Bold Emphasis
• Sub-subscript
• SUP-Superscript
• TEXTAREA-Multi-line text input box
• TT-Telex text
• U-Underline
• var-Defining variables

Variable element

A mutable element is a block element or an inline element that determines whether the element is in context.

• Applet-java Applet
• Button-Buttons
• Del-delete text
• Iframe-inline Frame
• INS-Inserted text
• Map-image block (map)
• Object-object Object
• Script-client-side scripting

CSS block-level elements, inline element concepts