Explain the usage of the box model in CSS

The visual type of media processes elements in the document tree according to the rules of the visual format Model of CSS (visual formatting models), transforming (X) HTML into the design of the creator.

For example:

How to generate an element box;

Dealing with the relationship between the elements;

According to the size of the box, positioning and other CSS properties to determine the location of elements;

Therefore, in order to master the skills of using CSS to control elements in a page, you need to understand the principles of the box model and the visual format model.

Elements in the document tree produce rectangular boxes (box) that affect the distance between element content, the position of element content, the position of the background picture, and so on. Browsers, based on visual format models (visual formatting model), layout the boxes as visitors see them.

The visual format model also has the concept of "layout (layout)", but this is different from the concept of layout layout, which is often used in page design like "3 Rows 2 Columns" or "3 rows of 3 columns," and "layouts" in the visual format model refer to how each element is to be displayed.

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

Regular flow. In CSS 2.1, regular flow flows include block formatting for block boxes, inline formatting in inline boxes, relative positioning of block or inline boxes, and positioning of the Insert box.

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

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

Before understanding the concept of visual formatting, make it clear that a containing block is an important concept of the visual format model, and it can also be understood as a rectangle, and the function of the rectangle is to provide a reference to the elements contained within it. The calculation of the size and position of an element is often determined by the containing block in which the element resides.

Box model, also translated as "box model" is a very important concept of CSS, but also a more abstract concept.

Elements in the document tree produce rectangular boxes (box) that affect the distance between element content, the position of element content, the position of the background picture, and so on. Browsers, based on visual format models (visual formatting model), layout the boxes as visitors see them.

Therefore, in order to master the technique of using CSS layout, we need to understand the principle of the frame model and the visual format model.

The elements that are displayed in the browser can be seen as a rectangular box of things that are nested, stacked, or tied together to form a page.

Tip: "box model" is often translated into "case models." But the box is a thickness, that is to say the box is three-dimensional, and the box is not thickness, is two-dimensional, so this book uses the "box model" this translation method.

Figure 1 shows the "box" for each element, which consists of several parts:

Contents (content)

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

Border (border)

Borders (also translated as boundaries) can be shown in detail, and you can set the width, appearance style, and color.

Filler (padding)

Filler (also translated as fill, inner margin, inner patch, etc.) is the distance between the content frame and the border, and the filler section shows the background.

Margins (margin)

Margins (also translated as Edge white, outer margin, external patches, etc.) are transparent areas outside the border to set the distance between this element and other elements.

An element box with the top, right, bottom, and left sides of the four directions, as shown in Figure 2.

As you can see from Figure 2, the area of the 1 elements is actually made up of a few rectangular boxes: the contents of the element, the boxes formed by the filler, the border of the elements, and the boxes that the margins form. The edges of these boxes are also defined as follows:

The edge of the element content box, called "Content edge" or "inner Edge (inner edge)", 4 content Edge form "content box".

Filler forms the outer edge of the box, called the "filler edge (padding edge)", filler edge around the box filler. If the filler width is 0, the filler side and the content side coincide. 4 filler side Forms "filler box" (padding boxes).

The outer edge of the box formed by the border is called the border edge (border edge). If the border width is 0, the border and padding edges coincide. 4 Border edges form "border box".

The outer edge of the frame formed by margin, called "Margin Edge (margin edge)" or "Outside (outer edge)", the margin edge around the margin of the box. If the margin width is 0, the margin edges and border edges overlap. 4 Margin edges form "margin box" (margin boxes).

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

Whether the element of the resulting box has a width attribute or a height property;

Whether the box contains text or other boxes;

box is a table and so on.

For example, the following code (view instance) has a relationship between its contents box and the box, as shown in Figure 3, figure 4.

CSS code copy content to clipboard

* {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;}

　　

　　

• Example text in the 1th Li

　　

• Example text in the 2nd Li

　　

　　

ul below the div

By Figure 3 and Figure 4, we can find that:

The box width of the element = left margin (margin-left) + Left border width (border-left-width) + Left filler (padding-left) + content width (width) + right padding (padding-right) + Right Border width (border-r Ight-width) + right margin (margin-right)

The box height of the element = Top margin (margin-top) + Top Border Width (border-top-width) + upper padding (padding-top) + content height (height) + lower filler (padding-bottom) + lower border width (border-bo Ttom-width) + bottom margin (margin-bottom)

Tip: For margin to overlap vertically, see the section [8.9.2.2 margin overlap] in this chapter.

In IE 5.5 and earlier versions, and in IE 6.0/7.0 in weird mode, the box model is incorrectly interpreted as:

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

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

In other words, the wrong box model understands width and height as the widths and heights of the edges, not the content boxes. (Of course, many people think it's easier to calculate the size of a layout.) )

For example, the following code:

xml/html code to copy content to clipboard

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

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

As a result, the element size is displayed incorrectly.

Tip: In CSS 3, the creator can specify the width and height values to be applied to the content box or edge frame by using the "box-sizing" attribute.