Shulou(Shulou.com)06/02 Report--

This article focuses on "what is the difference between html block-level elements and row-level elements". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what is the difference between html block-level elements and row-level elements"!

Differences between inline and block elements:

1. Inline elements and block-level functions can be converted to each other, by changing the value of the display attribute to switch between block-level elements and inline elements, inline elements display:inline, block-level elements display:block.

two。 Inline elements and other inline elements are arranged on a horizontal line, all on the same line; block-level elements are always arranged on a new line, each block-level element occupies a separate line, arranged vertically down, and if you want to sort it horizontally, you can use float:left/right to arrange it horizontally.

3. Line elements can not be set width and height, width and height varies with the content of the text, but you can set line height (line-height), while setting the outer margin margin up and down invalid, effective left and right, inside filling padding up and down invalid, effective left and right; block-level elements can be set width and height, and width and height and outer margin, the inner fill can be controlled at will.

4. Block-level elements can contain inline and block-level elements, as well as inline elements and other elements; inline elements cannot contain block-level elements, but only text or other inline elements.

In order to help you make learning easy and efficient, share a large number of materials for free to help you overcome difficulties on your way to becoming a front-end engineer or even a full-stack engineer. Here to recommend a front-end full-stack learning exchange circle: 784783012 welcome everyone to join the group, study and exchange, and make common progress.

When you really start learning, it is inevitable that you do not know where to start, resulting in inefficiency that affects your confidence in continuing learning.

But the most important thing is not to know which technologies need to be mastered, step on the pit frequently while learning, and eventually waste a lot of time, so effective resources are still necessary.

Characteristics of intra-line and massive elements

In a standard document stream, block-level elements have the following characteristics:

① always starts on a new line and occupies a whole line

② height, row height, outer and inner margins can be controlled.

③ broadband is always the same as the browser width, independent of content

④ it can hold inline elements and other block elements.

Characteristics of in-line elements:

① and other elements are on one line

② height, row height and outer and inner margins can be changed.

The width of ③ is only related to content

④ inline elements can only hold text or other inline elements.

Width and height cannot be set, its width increases with content, height changes with font size, inline elements can set outer boundaries, but outer boundaries do not work on top and bottom, but can only work on left and right, and can also set inner boundaries, but inner boundaries do not work on up and down in ie6, only on left and right.

What are the block-level elements?

Address definition address

Caption defines the table title

Definition entries in the dd definition list

Div defines a partition or section in a document

Dl definition list

Items in the dt definition list

Fieldset defines a frameset

Form creates an HTML form

H2 defines the largest title

H3 definition subtitle

H4 definition title

H5 > define title

H6 definition title

H7 define the smallest title

Hr creates a horizontal line

The legend element defines a title for the fieldset element

Li tag defines list items

Noframes displays text for browsers that do not support frames, inside the frameset element

Noscript defines alternatives when the script is not executed

Ol defines an ordered list

Ul defines an unordered list

P tag defines paragraph

Pre defines preformatted text

Table tag defines the HTML table

Tbody tag form body (body)

Standard cells in td tables

Tfoot defines the footer of a table (footnote or table note)

Th defines the header cell

The thead tag defines the header of the table

Tr defines rows in a table

What are the elements in the line?

A tag defines the anchor

Abbr represents an abbreviated form

Acronym definition takes only acronyms

B font bold

Bdo overrides the default text orientation

Big large font bold

Br line feeds

Define by cite reference

Code defines computer code text

Dfn defines a definition project

Em is defined as something emphasized.

I italic text effect

Img embeds an image into a web page

Input input box

Kbd defines keyboard text

The label tag defines annotations (tags) for input elements

Q define short references

Samp defines sample text

Select creates a single or multiple selection menu

Small > presents the effect of a small font

Span combines inline elements in a document

Strong has a stronger emphasis.

Sub definition subscript text

Sup > define superscript text

Textarea multi-line text input control

Tt typewriter or text effect of equal width

Var defines variables

Variable element

A variable element determines whether it is a block element or an inline element according to the context.

Button button

Del defines deleted text in a document

Iframe creates an inline frame (that is, inline frame) that contains another document

The ins tag defines the text that has been inserted into the document

Map client image mapping (that is, hot spots)

Object object object

Note: block-level elements can contain inline elements and block-level elements. Inline elements cannot contain block-level elements.

At this point, I believe you have a deeper understanding of "what is the difference between html block-level elements and row-level elements". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.