First, the classification of elements according to CSS display classification, XHTML elements are divided into three types: block elements, inline elements, variable elements 1, block-level element features a, blocky elements in the Web page is in the form of blocks, so-called block is the element is displayed as a rectangular area, b: By default, block elements occupy one line, and in layman's terms, there is no side-by-side display of two adjacent block elements; By default, block elements are ranked top-down in order. c: A block element can define its own width and height.  D: Block elements are generally used as containers for other elements, which can accommodate other inline elements and other block elements. We can liken this container to a box. 2, inline element (or inline element) inline element three features: a: The expression of an inline element is always displayed in a row, one after the other, b: The inline element does not have its own shape, it cannot define its width and height, it displays , the height can only be determined based on the height and width of the content contained, and its smallest content unit also renders a rectangular shape; c: Inline elements also follow the basic rules of the box model, such as the ability to define properties such as Padding,border,margin,background. However, individual attributes are not displayed correctly; (padding-top:;margin-top/bottom:;) 3, common block-level elements, inline element block-level elements:  DIV-most commonly used block-level elements DL-block-level elements for use with DT-DD form-interactive form h1-h6-Big title  &N Bsp HR-Horizontal divider ol– Sequence Table p-paragraph ul-unordered list fieldset-form field sets Colgroup-col-table single-column grouping elements table-tr-td tables and rows-cells & Nbsp; pre-Formatted Text  &Nbsp; inline Elements: a– hyperlinks (anchor points) BR-line break &NB Sp i-Italic  EM-emphasis &NB Sp img-Images &NBS P input-input box &NBS P Label-Forms tab sp An-commonly used inline container, define text within chunks strong-Bold accent sub-Subscript sup-Superscript textarea-Multiline text input box u-underline select- Project selection variable elements need to determine whether the element is a block element or an inline element depending on the context relationship. For example: button-buttons del-delete text Two, element transition element type conversion required Determines whether the element is a block element or an inline element, depending on the context relationship. Box models can change the default display type by displaying properties display properties and property values (18 property values) common property values: Block/inline/inline-block/none/list-item/flex Function: This property sets or retrieves the type of box model that the object element should generate the effect of each property value:  1) block block display: Similar to adding line breaks after an element, meaning that other elements cannot be displayed side by side. (Converts an element to a block element, which has the feature of a block element;) Inline inline 2: Removes line breaks after an element, and multiple elements can be displayed side-by-side in a row. (element converted to inline Element) 3) When the element is set with the float property, it is equivalent to adding display:block to the element; declaration; 4) Inline-block inline block element display: The contents of the element are displayed in chunks, Other elements within the row appear on the same line. (only this one element type supports the Vertical-align attribute) img,input (inline block Element).  5) None This element is not displayed.  6) List-item: Converts an element into a list. The default type of li. Basic Type A, most block elements the Display property value defaults to block, where the default value for list Li is List-item. b, the Display property value for most inline elements defaults to inline, where img,input, the default is inline-block (inline block Element). Vertical Center set an element to center vertically in a container, you must change the default display property value to Inline-block, and the sibling Element (ruler) (sibling element [ruler] style set to Vertical-align: middle;width:0;height:100%;d Isplay:inline-block;). Three conditions:
1: Must add Text-align:center to the container (parent element);
2: The current element must be transferred to the inner block element (Display:inline-block;) and the current element is added Vertical-align:middle;
3: Add the sibling element span after the current element (no carriage return), and vertical-align:middle;width:0;height:100% the span;d isplay:inline-block
On the types of elements in HTML
