CSS element Classification and differences

Elements are the basis of a document's structure, and in CSS, each element generates a box containing the contents of the Element (box, also translated as "box"). However, different elements are displayed differently, such as <div> and <span>, and <strong> and <p> are not the same. Different types are prescribed for different elements in a document type definition (DTD), which is one of the reasons why a DTD is important to a document.

• Replacement and non-replaceable elements

From the characteristics of the elements themselves, can be divided into replacement and non-replaceable elements.
a) Replace element
The replacement element is that the browser determines the specific display of the element based on the tag and attributes of the element.
For example, the browser will read the image information according to the value of the SRC attribute of the tag and display it, and if the (X) HTML code is viewed, the actual content of the picture is not visible, for example, depending on the type property of the <input> tag, the input box is displayed. Or a radio button, and so on.
X , <input>, <textarea>, <select>, <object> in HTML are all replacement elements. These elements often have no actual content, which is an empty element, such as:

<input type= "Submit" name= "Submit" value= "Submission"/>
The browser displays these elements based on the label type and attributes of the element. The replaceable element also generates a box in its display.
b) Non-replaceable elements
X Most elements of HTML are non-replaceable elements, meaning that their content is displayed directly to the client (for example, a browser). For example:
<p> content of the paragraph </p>
Paragraph <p> is a non-replaceable element, the text "paragraph content" is all displayed.

• Display element

In addition to the classification of replaceable and non-replaceable elements, elements in CSS 2.1 have different classifications: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).
A) block level elemental block element
The most obvious feature of an element that is visually formatted as a block is that it fills the content area of its parent element horizontally by default, and there are no other elements on either side of it, that is, block-level elements are exclusive by default.
Typical block-level elements are:<div> (Common block-level easy, also the main tag of CSS layout), <p>, The float (float property, float left or right) is set by CSS, and the setting display property for "block" or "List-item" is a block-level element.
However, floating elements are special, and because of the float, there may be other elements next to them. The "List-item" (list item <li>) generates a dot symbol, or a number ordinal, in front of it.

Block-level elements, height and width can be set, block-level elements are more overbearing, the default state occupies an entire row each time, the following content must be a new line to display.
b) inline Element
The popular point is the way the text is displayed, in contrast to block-level elements, the height of the inline element is not set to the width of its own text or the width of the picture. The inline element does not form a new block of content, that is, it can have other elements around it, such as <a>,<span> (commonly used inline containers, define text within chunks), <strong>, and so on, are typical inline-level elements.
Elements with the display property equal to "inline" are all inline elements. Almost all of the replaceable elements are inline elements, such as , <input>, and so on.
However, the type of the element is not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.

In the CSS authoritative guide, it is defined as: " any visible element that is not a block-level element is an inline element, and its performance is in the form of" row layout " . It is important to remember that the height width of an inline element is not set, and its width is the width of its own text or image. Since you set the width of the height of half a day after no response to discover, originally this is only an inline element. It is also invalid to set Margin/padding's top and bottom properties on the row element.

CSS element Classification and differences