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

This article mainly explains "what are the definitions and advantages of DIV+CSS". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the definition and advantages of DIV+CSS.

Div+css is a popular web layout technology at present.

Div is used to store the data that needs to be displayed (text, charts). Css is used to specify how to display it, so as to achieve the effect of data and display each other.

Separation of performance and content

Concise code to improve the speed of page browsing

Easy to maintain and modify

Improve the efficiency of indexing web pages by search engines

We can simply understand div+css as follows:

Div is a container for storing content (text, pictures, elements).

Css is used to specify how content placed in div is displayed, including the location and appearance of the content.

HTML is just a means of giving content, and most HTML tags have meaning (for example, tags p to create paragraphs, H2 tags to create headings, etc.), while div and span tags don't seem to have any meaning in content and sound as useless as a foam hammer. But in fact, when combined with CSS, they are widely used. All you need to remember is that span and div are "meaningless" labels. They exist purely to apply styles, so they have no effect when the stylesheet fails.

They are used to combine large chunks of HTML code and give certain information, most of which are associated with elements using the class attribute class and the identity attribute id. The difference between span and div is that span is inline and is used in a small inline HTML. And div (division) element is block-level (simply put, it is equivalent to its before and after a line break), used to combine a large chunk of code, HTML document for large chunks of content to provide structure and background elements, can contain paragraphs, headings, tables and even other parts, which makes it easy for div to build different integrated classes.

Everything between the start and end tags of the div is used to form this block, and the properties of the elements contained in it are controlled by the attributes of the div tag, or by formatting the block using a style sheet

(1) related properties of box model

Margin (outer margin / boundary)

Border (border)

Padding (inside margin / fill)

Let's take a look at the figure to understand the role of each attribute:

The above attributes are divided into four directions: top, right, bottom and left.

Question: how to calculate the width width and height height of page elements?

Answer: actual occupancy size of element = element size + padding + border width

For example, the actual occupancy height of the element = height attribute + upper and lower padding + upper and lower border width

(2) the hierarchical relationship of box model.

We understand it through a classic box model 3D solid structure diagram, as shown in the figure:

From the top down, the hierarchical relationship is as follows:

Layer 1: frame of the box (border)

Layer 2: content of the element (content), inner margin (padding)

Layer 3: background image (background-image)

Layer 4: background color (background-color)

Layer 5: the outer margin of the box (margin)

As can be seen from this hierarchical relationship, when the background image and background color are set at the same time, the background

The picture will be displayed above the background color

For example:

Horizontal center and vertical center

Horizontal centering includes two situations:

Horizontal center of block-level elements: margin:0px auto

The level of text content is in the middle: text-align: center

Center vertically:

The vertical centering of the common single-line text can set the height of the line of the text and

Row height style properties are consistent, such as:

Div {

Width: 400px

Height: 400px

Line-height: 400px

}

The first thing to understand floating attributes is to figure out, what is a document stream?

Document flow: browsers based on the order in which elements appear in html documents

Arranged from left to right and from top to bottom

The floating property is a positioning property in CSS, and its usage is as follows:

Float: floating direction (left, right, none)

Left floats on the left, right floats on the right, and none does not float if it is the default

To set the float of the element, which will move left or right away from the document stream

Until its outer margin touches the border of the parent element or the edge of another floating element

Frame up to

Floating example, without using the floating 3 DIV:

HTML structure code:

Block 1 div

Block 2 div

Block 3 div

CSS style Code:

# first, # second, # third {

Width:100px

Height:50px

Border:1px # 333 solid

Margin:5px

}

The execution effect is as shown in the figure:

Add float:left to the style

The execution effect is as shown in the figure:

Change it to float: right to see what the effect of floating on the right is.

16. Let the commodity category DIV, content DIV and right DIV be placed side by side

HTML structure code:

CSS style code (added to section 13 CSS code):

17. Clear cleanup

Clear is valid only for block-level elements, indicating line wrapping if the previous element floats to the left or right

Values of clear attribute: rigth, left, both, none

At this point, I believe you have a deeper understanding of the "definition and advantages of DIV+CSS". 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.