Block elements in CSS (block-level elements) and inline elements (inline elements)

Source: Internet
Author: User
Tags xml example

Block element is generally a container element of other elements, and block elements generally start from the new row, which can accommodate inline elements and other block elements, and the common block element is the paragraph label "P". The block element of "form" is more extraordinary, and it can only be used to accommodate other block elements.

If there is no CSS, the block elements are ordered to go down in a row each time. With CSS, we can change the default layout of this HTML and put the block elements where you want them. Instead of every stupid other line. It should be noted that table tags are also one of the block elements, table Based layout and CSS Based layout from the perspective of the general user (not including visually impaired, blind, etc.) of the two layouts, in addition to the page loading speed differences, there is no other difference. But if ordinary users inadvertently point out the page source code button, the difference between the two is very large. Based on the concept of good reconstruction of CSS layout page source code, at the very least, can let no Web development experience of ordinary users to quickly read the content. From this point of view, CSS Layout Code should have a better aesthetic experience.

You can think of the block element div as a box, or if you've played a clip, it's easier to understand. We first cut down the articles we need from various newspapers and magazines. Each cut is a block . Then we put the pieces of paper on a blank new piece of paper according to our own layout intent. This will create your own unique digest letters. As an extension of technology, Web page layout design also follows the same pattern.

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

It should be stated that the Chinese term of the inline element has multiple inline elements, inline elements, in-line elements, and straight-forward elements. Basically there is no unified translation, love how to call it. In addition to the inline elements, we would think that the property of a display is display:inline; This property is able to fix the famous IE double floating boundary problem.

Both the block element and the inline element 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 variable element is based on the above two changes with the environment, and its basic concept 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.

Block and inline classification details for HTML tags:

Block element

Div css xhtml xml Example source code Example source code

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 (this chunk content is displayed for browsers that do not support frame

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

OL-Sort the form

P-Paragraph

Pre-formatted text

Table-Tables

UL-Non-sorted list

Inline elements (inline element)

div css xhtml XML Example source code Example source code

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

div css xhtml XML Example source code Example source code

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

Applets- java applets

Button-Buttons

Del-delete text

Iframe-inline Frame

INS-Inserted text

Map-image block (map)

Object-object Object

Script- client-side scripting

Block elements in CSS (block-level elements) and inline elements (inline elements)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.