CSS block-level elements and inline elements [basic dictionary]

CSS document streams and block-level elements (blocks) and inline elements (Inline)

Document Stream

Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream.

Each non-floating block-level element occupies only one row, while 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.

The Inline element does not exclusive 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.

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

Relative positioning, that is, offset relative to the position of the element in the Document Stream. However, the original placeholder is retained.

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 and offset relative to the video area.

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.

* A row is an element in a row and can only be placed in a row. A block-level element is a four-square block that can be placed anywhere on the page.
* 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.
* General Block-level elements such as paragraphs <p>, titles * A notable feature of block-level element-free is that each block-level element is displayed from a new line, and the subsequent element-free must be displayed in another line.
* <Span> In the CSS definition, a row element, and <div> is a block-level element.

 

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 noframes-frames content (this block content 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-Sort list
* P-paragraph
* Pre-format text
* Table-table
* Ul-non-sorted list
 

 

Inline Element)

Code

  1   
  2   * A-anchor
  3   * Abbr-abbreviation
  4   * Acronym-First word
  5   * B-bold (not recommended)
  6   * BDO-bidi override
  7  * Big-large font
  8   * Br-line feed
  9   * CITE-Reference
  10   * Code-computerCode(Required when source code is referenced)
  11   * Dfn-define a field
  12   * Em-emphasis
  13   * Font-font setting (not recommended)
  14   * I-italic
 15   * IMG-Image
  16   * Input-input box
  17   * KBD-defines the keyboard text
  18   * Label-Table label
  19   * Q-short reference
  20   * S-hyphen (not recommended)
  21   * Samp-Defines sample computer code
  22  * Select-select a project
  23   * Small-small font text
  24   * Span-commonly used inline containers that define text blocks
  25   * Strike-dashes
  26   * Strong-highlighted in bold
  27   * Sub-subscript
  28   * Sup-superscript
  29   * Textarea-multi-line text input box
 30   * Tt-telex text
  31   * U-underline
  32   * 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