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

Today, I would like to talk to you about how to carry out the characteristics and transformation of block-level elements and in-line elements. Many people may not know much about it. In order to make you understand better, the editor summarized the following. I hope you can get something from this article.

Block-level elements and inline elements

1. Definition of element

According to the CSS specification, every web element has a display attribute, which is used to determine the type of the element. Each element has a default display attribute value, such as the div element, whose default display attribute value is "block" and becomes a "block-level" element (block-level), while the default display attribute value of the span element is "inline", which is called the "inline" element.

Block-level elements such as div automatically occupy a certain rectangular space. You can adjust the appearance of this rectangle by setting attributes such as height, width, inner and outer margin. The characteristics of block-level elements are summarized as follows:

Exclusive row by default

When there is no width, it will fill a row by default.

Support for all css commands

In contrast, inline elements such as "span" and "a" do not have their own independent space and are attached to other block-level elements. therefore, it is invalid to set attributes such as height, width, inner and outer margins on inline elements, and the characteristics of inline elements are summarized as follows:

In the same row, you can continue to follow the same label.

Content spread width

Width and height are not supported

Upper and lower margin and padding are not supported.

Code breaks are parsed

1. Transformation of elements

Display:block-> display as blocks: make inline elements have the properties of block attribute tags

Display:inline-> display as embedded: make row block attribute tags have the characteristics of inline elements

Display:inline-block-> appears as an inline block element

Characteristics of inline block elements:

Blocks are displayed in a row

Inline attribute tags support width and height

When there is no width, the content stretches the width.

Question:

1. Code wrapping is parsed

2. Ie6 ie7 does not support inline-block of block attribute tags.

3. Common inline elements

A-anchor point

* 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

4. Common block elements

* 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

Supplementary paradise

:

1. Vertical-align (vertical alignment)

.top {vertical-align:text-top} .bottom {vertical-align:text-bottom}

This is a picture.

An image located in a paragraph.

This is a picture.

An image located in a paragraph.

Running result:

PS:

In the tag, the attribute src does not have the URL of the image. Please add the image address test by yourself.

2. Css reset (reset)

CSS reset is due to different initial values of CSS styles interpreted by various browsers, resulting in different browsers assigning values to undefined styles according to their own default values when designers do not define a certain CSS attribute, so we have to define some CSS styles first to allow all browsers to interpret CSS according to the same rules, so that this problem can be avoided.

Example 1:

* {padding:0;margin:0;}

This is the most common and simplest CSS reset, and setting the padding kernel margin value of all elements to 0 can avoid "differences" in some browsers' understanding of the default values of the two attributes.

Example 2:

* {padding:0;margin:0;border:0;}

This adds a reset to the border property based on the previous reset, with an initial value of 0. 0.

Example 3:

* {padding:0;margin:0;border:0;outline:0;}

On the basis of the first two, the reset of the outline property is added to prevent some conflicts.

Example 4:

* {vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0;}

Concentrated practical css reset reset, this method is derived from Perishable Press.

After reading the above, do you have any further understanding of how to carry out the characteristics and transformation of block-level elements and in-line elements? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.