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

CSS box model usage example analysis, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Visual media processes the elements in the document tree according to the rules of CSS's Visual formatting Model (Visual formatting model), thus transforming (X) HTML into what the creator designed.

For example:

How to generate element boxes

Deal with the relationship between elements

Determine the location of the element according to the CSS attributes such as the size and positioning of the box.

Therefore, to master the skill of using CSS to control the elements in a page, you need to have an in-depth understanding of the frame model (Box Model) and the principle of visual formatting model.

The elements in the document tree produce rectangular Box, which affect the distance between the content of the element, the location of the content of the element, the location of the background picture, and so on. Browsers lay out these boxes according to the visual formatting model (Visual formatting model) so that visitors can see them.

There is also the concept of "layout" in the visual format model, but this is different from the concept of "layout" in "3 rows and 2 columns" or "3 rows and 3 columns", which is often used in page design. "layout" in the visual format model refers to how each element should be displayed.

In CSS 2.1, the layout of a control box can be based on three positioning schemes:

Normal flow direction. In CSS 2.1, general flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block boxes or inline boxes, and positioning of insert boxes.

Float. In a floating model, a box is first laid out according to the normal flow direction, and then it is removed from the flow and offset to the left or right as much as possible. The content can be arranged on a floating edge.

Absolute location. In the absolute positioning model, a box is completely detached from the normal flow direction (it has no effect on subsequent sibling elements) and allocates its positioning according to the containing block.

Before understanding the concept of visual formatting, one thing should be clear: Containing Block is an important concept of visual formatting model, it can also be understood as a rectangle, and the function of this rectangle is to provide a reference for the elements it contains, and the calculation of the size and position of elements is often determined by the inclusion block in which the element resides.

Frame model (Box model, also translated as "box model") is a very important and abstract concept in CSS.

The elements in the document tree produce rectangular Box, which affect the distance between the content of the element, the location of the content of the element, the location of the background picture, and so on. Browsers lay out these boxes according to the visual formatting model (Visual formatting model) so that visitors can see them.

Therefore, to master the skills of using CSS layout, you need to have an in-depth understanding of the principles of box models and visual formatting models.

The elements displayed in the browser can be thought of as rectangular boxes with things, and these rectangular boxes are nested, superimposed, or juxtaposed to form a page.

Hint: "box model" is often translated as "box model". But the box has thickness, that is to say, the box is three-dimensional, while the frame has no thickness and is two-dimensional, so the translation of "frame model" is adopted in this book.

Figure 1 shows that the "Box" of each element consists of several parts:

Content (content)

For example: text, pictures or other elements, the content can also be seen as a rectangular box, width (width) and height (height) two CSS attributes set is the content box width and height.

Border (border)

Borders (also translated as boundaries) can be specifically displayed, and you can set the width, appearance style, and color.

White filling (padding)

Padding (also translated as padding, inner margin, inner patch, etc.) is the distance between the content box and the border, and the padding part shows the background.

Margin (margin)

Margins (also translated as margins, outer margins, outer patches, etc.) are transparent areas outside the border that are used to set the distance between this element and other elements.

An element box with edges in the top, right, bottom and left directions, as shown in figure 2.

As you can see from figure 2, the area occupied by an element is actually composed of several rectangular boxes: the content box of the element, the box formed by the blanking, the border of the element, and the box formed by the margin. The edges of these boxes are also defined as follows:

The edge of the content box of an element is called "content edge" or "inner edge", and the four content edges form a "content box".

The outer edge of the box formed by whitening is called "padding edge", which fills the white around the box. If the padding width is 0, the padding edge coincides with the content edge. Four white edges form a "padding box".

The outer edge of a frame formed by a border is called a "border edge" (border edge). If the border width is 0, the border edge coincides with the padding edge. Four border edges form a "border box".

The outer edge of a box formed by a margin, called "margin edge" or "outer edge", which surrounds the margin of the box. If the margin width is 0, the margin edge coincides with the border edge. Four margin edges form a "margin box (margin box)".

The size (width and height) of the content box depends on several factors, such as:

Whether the element that produces the box has the width attribute or height attribute set

Whether the box contains text or other boxes

Whether the box is a table, and so on.

For example, the following code (see an example) shows the relationship between the content box and the box, as shown in figures 3 and 4.

* {margin:0; padding:0; color:#666;} / * clear browser default style * /

Div {border:4px solid # F90; background:#FC6;}

Ul {list-style:none; margin:10px; padding:10px; background:#FC6;}

Li {padding: 10px 0 10px 10px; background: # FF9;margin: 15px;}

.sample {margin-right:0; border:5px dashed # F90;}

Sample text in the first li

Sample text in the second li

Div under ul

From figures 3 and 4, we can find:

The box width of the element = left margin (margin-left) + left frame width (border-left-width) + left margin (padding-left) + content width (width) + right margin (padding-right) + right frame width (border-right-width) + right margin (margin-right)

The box height of the element = top margin (margin-top) + top border width (border-top-width) + top margin (padding-top) + content height (height) + bottom margin (padding-bottom) + bottom border width (border-bottom-width) + bottom margin (margin-bottom)

Tip: for cases where margin overlaps vertically, see the section [overlap of 8.9.2.2 margins] in this chapter.

In IE 5.5 and earlier, as well as in IE 6.0 in weird mode, the box model was mistakenly understood as:

Width = border-left + padding-left + content width + padding-right + border-right

Height = border-top + padding-top + content height + padding-bottom + border-bottom

That is, the wrong box model interprets width and height as the width and height of the border, not the content box. (of course, many people think that this setting makes it easier to calculate the size of the layout. )

For example, the following code:

Div {width:300px; margin:10px; padding:15px; border:5px solid # ccc;}

The box width of div should be 360px (10px + 5px + 15px + 300px + 15px + 5px + 10px), while in IE's error box model, the box width is 320px (10px + 300px + 10px), and the actual content width is 260px (300px-15px*2-5px*2).

As a result, the element size is displayed incorrectly.

Tip: in CSS 3, the producer can specify the values of width and height to be applied to the content box or border through the "box-sizing" attribute.

After reading the above, have you mastered the method of example analysis of the use of box model in CSS? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.