The features and differences between block elements and inline elements.

The features and differences between block elements and inline elements.

<! -- Block-level elements and inline elements based on css
Features of block-level elements: 1. occupies a whole row.
2. It is a rectangle.
3. You can define the width and height, inner margin, and outer margin.
4. Its display attribute is block by default.
Characteristics of inline elements: 1. It does not occupy a whole row and can be side by side.
2. It is attached to other block-level elements. If only inline elements exist, it is attached to the body, and the body is also a block-level element.
3. The width, height, inner margin, and outer margin are invalid.
4. Its display attribute is inline by default.
--->
<! -- Commonly used inline elements -->
<A href = "#"> </a>
(img replaces the inline element replaced inline element, which belongs to the inline element category. The picture has width and height, but does not count as one line !)
<Input type = "text"/>
<Label for = ""> </label>
<Br/>
<Span> </span>
<Textarea name = "" rows = "fill in a number: Row" cols = "" fill in a number: column> </textarea>
<Select name = "" id = ""> <option value = "1"> 1 </option> </select>
<! -- Frequently used block-level elements -->
<Div> </div>
<Ul> <li> </ul>
<Form action = ""> </form>
<H1> <H2> <H3> <H4> <H5> <H6> <Hr/>
<P> </p>
<Table> </table>
<! -- Inline element (big family of intra-row elements)
A -- anchor
Abbr -- abbreviation
Acronym-First word
B -- bold (not recommended)
Bdo -- bidi override
Big -- big font
Br -- line feed
Cite -- Reference
Code -- computer code (required when source code is referenced)
Dfn -- Define a field
Em -- emphasize
Font-font setting (not recommended)
I -- Italic
Img -- Image
Input -- input box
Kbd -- Define keyboard text
Label -- table label
Q -- short reference
S -- hyphen (not recommended)
Samp -- Define sample computer code
Select -- select a project
Small -- small font text
Span-commonly used inline containers, defining text blocks
Strike -- dashes
Strong -- highlighted in bold
Sub -- subscript
Sup -- superscript
Textarea -- Multi-line text input box
-->
<! -- Block-level element family
Address -- address
Blockquote -- block reference
Center -- center alignment Block
Dir -- directory list
Div-common block-level elements.
Dl -- definition list
Fieldset -- form Control Group
Form -- interactive form
H1 -- big title
H2-subtitle
H3-Level 3 title
H4-Level 4 title
H5-Level 5 Title
H6-Level 6 Title
Hr-horizontal Separator
Isindex -- input prompt
Menu -- menu list
Ol -- sorting form
P -- paragraph
Pre -- format text
Table -- table
Ul -- Non-sorted list -->
Conversion between block-level elements and inline Elements
According to the CSS specification, each webpage element has a display attribute to determine the type of the element. Each element has a default display attribute value.
1. inline ==> block level
In css: span {display: block}, the inline element of span is converted into a block-level element, which has the features of the block-level element (as described earlier ).
2. block level => inline
In css: div {display: inline}. In this way, the block-level element of div is converted into an inline element and has the characteristics of the inline element (as described earlier). However, this is meaningless, it is also not standard.
3. Special attribute: a {display: inline-block} in css }. (The application scope is limited and will be updated later)
Make the element have both some characteristics of inline elements (side by side in a row, attached to block-level elements) and some features of block-level elements (with wide and high margins ), in general, it is an inline block.
In css: a {display: inline-block; * display: inline; * zoom: 1;} (ie, remember !)

If there is any infringement, please contact!