CSS block-level elements, inline element concepts

Elements such as p, H1, or div are often referred to as block-level elements, which appear as a piece of content; strong. Elements such as span are called inline elements, and their contents are displayed in rows, or inline boxes. ( You can use display=block to convert inline elements into block elements,display=none means that the generated element doesn't have a box at all, nor does it show elements, Does not occupy space in the document ).

A, within the line is within a line of elements, can only be placed in the row, block-level elements, is a square block, can be placed on the page anywhere.
b, plainly, the element in the line is like a word; block-level elements are like a paragraph, and if no additional definitions are defined, it appears on a separate line.
C, general block-level elements such as paragraph <p>, title and other elements. Inline elements such as: Table cell <input>, Hyperlink <a>, Image , <span> .....
D, block-level element of the significant feature is: each block-level elements are displayed from a new line, and the following is a non-vegetarian also need to display another line.
E, <span> belongs to an inline element in the CSS definition, and <div> is a block-level element.

For those who have studied CSS, you can understand it as soon as you hear it. Can not be easy for beginners to understand, I am mainly to the novice said through ripe point bar!

The word "container" will make it easier to visualize their existence and purpose, the elements within the line are quite a small container, and the <div> is equivalent to a large container, and a large container can of course put a small container. <span> is a small container, so that you may have a preliminary impression in your mind, if we want to fill a large container with some water. But I also want to put some ink in the How to do? Very simply, we take the small container out of the ink and put it into the large container of water in it.

Block elements (blockelement) are typically container elements of other elements

Block elements are generally started from the new row, which can accommodate inline elements and other block elements. The common block element is the paragraph label ' P '. The block element of "form" is special, and it can only be used to accommodate other block elements.

Inline elements (inlineelement) are generally based on the semantic level (semantic) of the basic elements. Inline elements can only hold text or other inline elements, common inline element "a".

Both the block element (blockelement) and the inline element (inlineelement) are concepts in the HTML specification. The basic difference between a block element and an inline element is that the block element generally starts from the new row. When CSS control is added, this attribute difference between the block element and the inline element does not become a difference. For example, we can completely add an inline element cite to a property such as Display:block, so that he also has properties that start from the new line each time.

The basic concept of a mutable element is that he needs to determine whether the element is a block element or an inline element based on the context relationship. Mutable elements are also part of the above two categories of elements, and once the context determines his category, he follows the rules of block elements or inline elements. The approximate element classification is shown below.

block Element ( blockelement )

Address-Addresses

BLOCKQUOTE-Block Reference

Center-lifting Alignment block

DIR-List of directories

Div-Common block-level easy, is also the main tag of CSS layout

DL-Definition List

Fieldset-form control Group

Form-Interactive Form

H1-Big title

H2-Subtitle

H3-3 level headings

H4-4 level headings

H5-5 level headings

H6-6 level headings

HR-Horizontal Divider Line

Isindex-input prompt

menu-List of menus

Noframes-frames Optional content (Display this chunk content for browsers that do not support frame)

NoScript-Optional script content (this content is displayed for browsers that do not support script)

OL-Sorted list

P-Paragraph

Pre-formatted text

Table-Tables

UL-Non-sorted list

Inline Element ( inlineelement )

A-anchor point

ABBR-Abbreviation

Acronym-the first word

B-Bold (not recommended)

Bdo-bidi Override

Big-Large font

BR-line break

Cite-citation

Code-Computer codes (required when referencing source)

DFN-Defining fields

EM-emphasize

Font-typeface settings (not recommended)

I-Italic

IMG-Images

Input-Enter box

KBD-Define keyboard text

Label-Table Label

Q-Short Reference

S-Medium dash (not recommended)

Samp-Define sample computer code

Select-Project Selection

Small-Small font text

Span-a common inline container that defines chunks within a text

Strike-Medium Dash

Strong-Bold Emphasis

Sub-subscript

SUP-Superscript

TEXTAREA-Multi-line text input box

TT-Telex text

U-Underline

var-Defining variables

Variable element

A mutable element is a block element or an inline element that determines whether the element is in context.

Applet-java Applet

Button-Buttons

Del-delete text

Iframe-inline Frame

INS-Inserted text

Map-image block (map)

Object-object Object

Script-client-side scripting

CSS block-level elements, inline element concepts