On the types of elements in HTML

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.