What are block-level elements and inline-level elements (2)

Features of block elements:

① Always start on a new line;

② Height, row height, and outer and inner margins can be controlled;

③ The default width is 100% of its container unless a width is set.

④ It can accommodate inline elements and other block elements

Features of the inline element:

① And other elements are on one row;

② High, the row height, outer margin, and inner margin cannot be changed;

③ The width of the text or image cannot be changed.

④ Inline elements can only contain text or other inline Elements


(The Chinese name contains multiple inline elements, embedded elements, in-row elements, and straight forward elements ).

Both block element and inline element are concepts in the HTML specification.

Block elements andThe basic difference between inline elements is that block elements generally start from new rows..

When CSS control is addedSuThe difference between this attribute and the inline element will not be the same.

For example, we can completely put inline ElementsAdd dIsplay: This attribute makes it a block element that starts from a new row every time.,

Similarly, we can add attributes such as display: inline to the block element so that it can be arranged on a row.

Variable element:

It is based on the above two changes with the environment. Its basic concept is that it needs to determine whether the element is a block element or an inline element based on the context relationship.

The variable element still belongs to the above two element categories. Once the context relation determines its category, it must follow the block element or Inline element rule restrictions.

Block Element)

◎ Address-address

◎ BLOCKQUOTE-block reference

◎ Center-align Blocks

◎ Dir-directory list

◎Div-Easy to use block-level, which is also the main tag of CSS layout

◎DL-definition list

◎Fieldset-Form Control Group

◎ Form-interactive form

◎H1-title

◎H2-subtitle

◎H3-Level 3 title

◎Level H4-4 title

◎H5-Level 5 Title

◎H6-6 level title

◎ HR-horizontal Separator

◎ Isindex-input prompt

◎ Menu-Menu list

◎ Optional content of noframes-frames (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-sorting form

◎P-paragraph

◎ Pre-format text

◎Table-table

◎Ul-non-sorted list (unordered list)

Inline Element)

◎A-anchor

◎ Abbr-abbreviation

◎ Acronym-First word

◎ B-bold (not recommended)

◎ BDO-bidi override

◎ Big-large font

◎Br-line feed

◎ CITE-Reference

◎ Code-computer code (required when source code is referenced)

◎ Dfn-define a field

◎ Em-emphasis

◎ 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 that define text blocks

◎ Strike-dashes

◎Strong-highlighted in bold

◎ Sub-subscript

◎ Sup-superscript

◎Textarea-multi-line text input box

◎ Tt-telex text

◎ U-underline

◎ 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