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

This article shows you how to understand the block-level elements and inline elements in CSS programming. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Block element block-level elements

As the name implies, it is an element displayed in blocks, and the height and width can be set. For example, what we often use,

All belong to block-level elements by default. Block-level elements are domineering, occupying an entire row at a time by default, and the following content must be displayed on a new line. Of course, non-block-level elements can also be changed to block-level elements through css's display:block;. In addition, there is a special feature that float also has.

Inline element inline elements

The popular point is the way the text is displayed. In contrast to block-level elements, the height and width of inline elements cannot be set, and their width is the width of their own text or picture. What we often use, are all inline elements. The display feature of inline elements is that they are displayed like text and do not occupy a single line. Of course, block-level elements can also be turned into inline elements, which is achieved through css's display:inline; and float.

What do you mean by inline elements? What is a block level element.

The Chinese characters in the authoritative Guide to CSS show that any visible element that is not a block-level element is an inline element. The characteristic of its expression is the form of "row layout", which means that its form of expression is always displayed in rows. For example, we set an inline element border-bottom:1px solid # 000; that repeats each line, with a thin black line below each line. If it is a block-level element, the black line displayed will only appear below the block.

Elements such as p, H2, or div are often called block-level elements, which are displayed as a piece of content; elements such as strong, span, and so on are called inline elements, and their contents are displayed in a line, that is, "inline boxes." (you can use display=block to convert inline elements into block elements, and display=none means that the resulting element has no box at all, neither displays the element, nor takes up space in the document.)

A: an inline is an element within a line that can only be placed within a line; a block-level element is a square that can be placed anywhere on the page

B: to put it bluntly, the in-line element is like a word; the block-level element is like a paragraph, and it will appear on a separate line if it is not defined.

C: general block-level elements such as paragraphs

Elements such as, title..., list, table, form, DIV, and BODY. Inline elements such as form elements, hyperlinks, images

、...

D: the remarkable feature of block-level elements is that each block-level element is displayed from a new line, and the subsequent elements need to be displayed on another line.

E: is an inline element in the CSS definition, but a block-level element.

For those who have studied CSS, it is easy to understand. But it is not easy for beginners to understand, I am mainly familiar with the novice bar!

Using the word container makes it easier to understand their existence and use. The elements in the line are equivalent to a small container and a large container. Of course, a large container can put a small container. It is a small container, so you may have a preliminary impression in your mind if we want to put some water in a large container. But I also want to put some ink in it. What should I do? It's very simple. Let's just take out the small container and fill it with ink and put it in the clear water in the big container.

Let me give you a simple practical example, such as:

XML/HTML Code copies content to the clipboard

Abcdefg

I want to use CSS to define the style of the letter c, so we can use it.

CSS Code copies content to the clipboard

Abcdefg

Block elements (block element) are generally container elements of other elements. Block elements usually start with new lines and can accommodate inline elements and other block elements. The common block element is the paragraph tag'P ". The" form "block element is special and can only be used to accommodate other block elements.

Without the role of css, the block elements will be arranged one line at a time all the way down. With css, we can change the default layout mode of this html and put the block elements in the location you want. Instead of foolishly starting another line every time. It should be pointed out that the table tag is also a kind of block element, table based layout and css based layout from the general user's point of view (excluding the visually impaired, blind, etc.), there is no other difference between the two layouts except for the difference in page loading speed. But if the average user inadvertently clicks the view page source code button, the difference between the two is very big. The css layout page source code designed based on a good concept of refactoring can at least allow ordinary users who have no experience in web development to read the content quickly. From this point of view, css layout code should have a better aesthetic experience.

You can think of the block container element div as box, or if you've played with clippings, it's easier to understand. Let's first cut out the articles we need from all kinds of newspapers and magazines. Each piece of cut content is a block. Then we re-paste these pieces of paper onto a new blank piece of paper with glue according to our own typesetting intention. In this way, you have formed your own unique abstract KuaiBao. As an extension of technology, web layout design also follows the same pattern. .

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

Block elements (block element) and inline elements (inline element) are concepts in the html specification. The basic difference between block elements and inline elements is that block elements generally start with a new line. When css control is added, this attribute difference between block elements and inline elements does not become a difference. For example, we can add an attribute such as display:block to the inline element cite so that it also has an attribute that starts with a new line every time.

The basic concept of a mutable element is that it needs to determine whether the element is a block element or an inline element based on the context. The variable element still belongs to the above two element categories, and once the context determines its category, it has to follow the rules of block elements or inline elements. For a general classification of elements, see the full text.

Ps: the Chinese name for inline element, there are a variety of inline elements, embedded elements, inline elements, straight elements. Basically, there is no unified translation, so call it what you like. In addition, when it comes to inline elements, we will think of a display attribute that is display:inline;, which can fix the famous IE double floating boundary problem.

Block element (block element)

* address-address

* blockquote-Block reference

* center-align blocks in the lift

* dir-list of directories

* div-commonly used block-level easy, is also the main label of css layout

* dl-definition list

* fieldset-form control group

* form-Interactive form

* H2-headline

* H3-subtitle

* headings at level h4-3

* level h5-4 headings

* headings at level h6-5

* headings at level H7-6

* hr-horizontal separator

* isindex-input prompt

* menu-menu list

* noframes-frames optional content, (this block content is displayed for browsers that do not support frame

* noscript -) optional script content (displayed for browsers that do not support script)

* ol-sort form

* p-paragraph

* pre-formatted text

* table-form

* ul-unsorted list

Inline element (inline element)

* a-Anchor

* abbr-abbreviation

* acronym-initials

* b-bold (not recommended)

* bdo-bidi override

* big-Big font

* br-Line feeds

* cite-reference

* code-computer code (required when referencing source code)

* dfn-define the field

* em-emphasize

* font-Font setting (not recommended)

* I-italic

* img-Picture

* input-input box

* kbd-define keyboard text

* label-form label

* Q-short reference

* s-dash (not recommended)

* samp-defines the sample computer code

* select-Project selection

* small-small text

* span-commonly used inline containers to define blocks within text

* strike-underlined

* strong-emphasis in bold

* sub-subscript

* sup-superscript

* textarea-multiline text input box

* tt-telex text

* u-underline

* var-define variables

Variable element

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

* applet-java applet

* button-Button

* del-Delete text

* iframe-inline frame

* ins-inserted text

* map-Picture Block (map)

* object-object object

* script-client script

Inline content refers to content made up of inline elements, which we all know, such as SPAN element, IFRAME element, and element-style display: inline. For example, elements such as text are arranged horizontally between letters and automatically wrap at the rightmost end.

Block-level content is made up of block-level elements, DIV is the most commonly used block-level element, element-style display:block is block-level elements. They are always expressed in the form of a block, and are arranged vertically with their siblings in turn, full left and right.

The difference between block-level elements and inline elements is that block-level elements are displayed on one line, while inline elements can be displayed side by side.

1. For inline elements, you should pay attention to the following:

Setting width width is not valid.

Setting height height is not valid and can be set through line-height.

Setting margin is valid only for left and right margin, but not up and down.

Setting padding is valid only for left and right padding, but not for upper and lower. Notice that the range of the element is increased, but it has no effect on the content around the element.

2. In IE6/7 and IE8 hybrid mode, text- align:center can also align block-level elements. In other browsers, text-align:center works only on inline content.

Solution: set "margin:0 auto" for all block-level elements that need to be centered relative to the parent container. However, this method is not supported in IE6/IE7/IE8 's promiscuous mode, so set the "text-align:center;" of the parent container. If the inline content within a center-aligned child element does not need to be center-aligned, you also need to set "text-align:left" for it:

3. Block-level elements and intra-line elements are summarized as follows:

The above is how to understand block-level elements and inline elements in CSS programming. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.