Differences between block (Block-level element) and inline (Inline element)

<TD style = "word-break: Break-all"> force line feed

<TD style = "width: 80px; display: block; boverflow: hidden;"> the value exceeds the hidden value. Set the width.

Inline conversion to block: Display: block or float: left/right

Bulk conversion to inline: Display: inline;

However, you must note that the width and height cannot be set for inline elements. It is necessary to forcibly convert inline elements into block-level elements.

A block-level element such as Div automatically occupies a certain rectangle space. You can adjust the rectangle by setting attributes such as height, width, and internal and external margins;

In contrast,

A row element such as "span" does not have its own independent space. It is attached to other block-level elements. Therefore, setting attributes such as the height, width, and internal and external margins of the row element is invalid.

In fact, the line elements you need to know are span and A. Other line elements, such as strong, B, and font, are the tags used to set text styles in HTML, after CSS is used, these tags should not be used, so knowing that they are useless can confuse beginners with some concepts.

Block is characterized by a broken line.

Inline does not display line breaks.

However, if float is added to an element, the elements will be placed in a row in the natural order. The height and width can be defined after the float is defined by block or Inline.

If inline exists independently, the width and height cannot be defined. Block is acceptable.

For example:

Under normal circumstances, a cannot define the height. The width can be defined, but only the text part is reflected in the mouse.

If display: block is added, the height can be defined, but it is not in a row. The whole block is reflected to the mouse.

If float: Left is added, the height and width can be defined. The whole part is responsive to the mouse, but it is a horizontal menu,

All elements that are allowed to be contained by the body element are either block-level or Inline. They can be counted as block-level or inline. But there is absolutely no element that can be contained by the body, that is, it is not a block-level, not an inline element.

Common block-level elements include Div, form, table, P, pre, H1 ~ H6, DL, ol, UL, etc.

Common inline elements include span, A, strong, em, label, input, select, textarea, IMG, and BR.

In addition, the script, object, MAP, button, Del, and INS elements can be both block-level elements and inline elements.

Generally, block-level elements can contain block-level elements and inline elements;

However, inline elements can only contain inline elements.

Note that each specific element can contain specific elements, so this rule is not applicable to individual elements.

For example, P elements can only contain inline elements, but cannot contain block-level elements.

Block Element)

It is generally a container element of other elements. Block elements generally start from a new line and can accommodate inline elements and other block elements. Common block elements are section tags 'P. The "form" block element is special. It can only accommodate other block elements.

Inline Element)

It is generally a basic element based on the semantic level (semantic. Inline elements can only contain text or other inline elements. Common inline elements are "".

PS: for the Chinese name of inline elements, there are multiple inline elements, embedded elements, in-row elements, and straight-forward elements.

When we mention inline elements, we will think of a display attribute: Display: inline; which can fix the famous IE Double Floating boundary.

 

Variable Element

Determine whether the element is a block or Inline element based on the context. 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-common block-level labels are easy, and they are also the main labels of CSS layout.

* Dl-definition list

* Fieldset-Form Control Group

* Form-interactive form

* H1-large title

* H2-subtitle

* H3-Level 3 title

* H4-4 level title

* H5-Level 5 Title

* H6-6 titles

* HR-horizontal Separator

* Isindex-input prompt

* Menu-Menu list

* Optional content of noframes-frames. (content in this block 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

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-defines the keyboard text

* Label-Table label

* Q-short reference

* S-hyphen (not recommended)

* Samp-Defines 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

This article is from the "phper" blog, please be sure to keep this source http://webphp.blog.51cto.com/8690270/1539621