Talk about the box model and the box model from a foreign language

Talk about the box model and the box model from a foreign language

Talk about the box model from a foreign language

 

Statement: As an old cainiao who is involved in the front-end, there will certainly be some deviations in understanding the knowledge. I would like to remind you of this. In my opinion, understanding the box model is the key foundation for learning the entire CSS. On the basis of http://www.chinaz.com/design/2010/1229/151993.shtml (translation), this article re-translated the http://www.sitepoint.com/web-foundations/css-box-model/ (pure English) This article, coupled with their own understanding, talk about the box model.

Foreign Translation:

Understanding the concept of the box model and how the box model determines the final size of an element helps you understand how an element is positioned on a webpage. The box model is mainly applicable to block-level elements. By the way, a related concept is introduced: inline layout model (Inline layout model), which defines how to locate the elements in a row. The inline Formatting format is described in detail.

Calculate the box size

In CSS2.1, block-level elements are displayed in rectangles. We calculate the overall size of a block-level element, including the width and height of the content area, and all the margin (margin) assigned to this element), padding (padding) and border (border ).

We can declare and define the width and height of an element to define the content width of this element. If no declaration is given, the default attribute of the width and height of the element is the default attribute of the browser.

For static elements (unlocated) and elements with relative positioning settings, their width is default, that is, the width of this element is its contained block (that is, the nearest parent element) width minus all the horizontal margins, inner margins and borders, and the scroll bar. That is to say, the width of this element is the remaining width of its contained block minus all the outer margins, inner margins, borders, and scroll bars (if any) in the horizontal direction.

The size and positioning of the contained block is a reference for its child element dimensions and positioning. Although the positioning of elements is based on their contained blocks, but not completely based on the contained blocks, these elements can also overflow their contained blocks. In most cases, for a sub-box, generated boxes plays the role that contains blocks. For more details about the contained Block, see Containing Block.

Column: Floating elements and their width At first, floating elements without declared width in CSS2 will not shrink to tightly wrap their content, but will keep the same width as their parent element. In CSS2.1, this situation has changed, and the floating element without declaring the width will tightly wrap its content. However, in IE6 and earlier versions, a floating element with no declared width will wrap its content tightly by default, unless one of its child elements sets a layout, in this case, the width of the floating element is extended to the full available content area. In addition, it must be noted that when a floating element with no configured width contains a right floating child element, the width of the floating element will be consistent with that of its parent element. This floating condition exists in the previous IE browser, including IE7 (earlier Firefox, including version 2.0, is actually a bug. But this problem has been solved in Firefox3.0 Alpha 6 ). Therefore, in order to avoid the above bug, we should try to set a clear width for the floating element, which will always be safer during webpage layout. However, as long as you pay attention to the above issues, you will find that the float element without width is always useful in some specific situations, such as in the horizontal flow layout menu (fluid-width horizontal menus ).

For floating or absolute positioning elements whose width is auto (including fixed positioning settings), they will shrink the size of the generated box to tightly contained content.

If the height is not set, the content height is the same as the content height regardless of how the content area is located.

Therefore, to understand the total space required by an element in a webpage, you must add the padding, border, and padding of the content area. Of course, an element may not have any padding, borders, or margins. In this case, its size will be supported by its own content.

If an element contains only floating or absolutely positioned elements, it will have no content and its height will be 0. This issue will be addressed in the Floating and Clearing article.

Box Model Implementation

Total width = left margin + left border + left padding + width + right padding + right border + right margin Total height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin

The following small case will best describe the box model. We use the calculation method to figure out how much space an element needs to display on the webpage (ignore the collapse of the outer margin and we will explain it in detail below ). As follows:

. Box { Width: 300px; Height: 200px; Padding: 10px; Border: 1px solid #000; Magin: 15px; }

This is our CSS case-declare all the box attributes for an element named box:

Calculate the overall size of the above box as follows:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px;

Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px;

The image shows the specific size, which is captured by Firebug.

 

In, we can clearly see that the content area (the blue part) is in the center, surrounded by the padding, border, and margin. The outer edge of the content area is referred to as the content edge or the inner edge. The outer edge of the inner edge is referred to as the padding edge ); the outer edge of the border area is called the border edge; the outer edge of the outer margin area is called-you can guess-the outer margin edge (margin edge) or the outer edge ).

From this small case, you can see that in order to display this element on the webpage, we need at least a space with a width of 352px and a height of 252px. If the available space is a little smaller than the space, the elements may be misplaced or overflow. It is worth noting that IE6 and earlier versions will try to stretch the nearest parent element containing this element to reach this element, which will disrupt the web page layout. Other browsers allow element overflow and ignore the overflow content.

Column: Accidental margin merge In the above calculation, although the margin is calculated in the space size required by the element, it should be noted that the margin of the adjacent elements in the vertical direction of the standard stream will be merged, and the outer margin after merging is the larger of the two. That is to say, the actual space required for calculating an element in an adjacent element does not need to be counted from the edge of the element's outer margin. Only the largest outer margin takes effect, a small margin is swallowed up by the largest margin and incorporated into the large margin. For more information, see Collapasing Margins.

Practical application of the Box Model

It is worth noting that if you set the width of an element to 100% (that is, the width of inherits its parent element), this element should not have any margin, padding, or border, this requires a larger display space for this element. This phenomenon is often ignored by designers and seriously disrupts the webpage layout, because the content either overflows or makes the elements wider than they should have.

In most cases, the solution is to avoid adding a specific width value (not an automatic value), but to apply only the outer margin, inner margin, and border. The width attribute of elements in the standard stream is default. Even if the outer margin, inner margin, and border are set, the available width area is considered to be full.

Of course, this method does not work in some situations. For example, an element is not an element in a standard stream, and a fixed width is required (just as the floating element above will not automatically stretch to fill its parent element ). In this case, you have two options.

If the available space is fixed in width, you only need to set various attribute values (such as margin, padding, and width) for the element so that the sum of the attribute values exactly matches the width of the available space. For example, if the width of the available space is PX and the element has 20 PX padding, you can set the width to PX, the padding is set to 20px (20 + 460 + 20 = 500 ). The premise of this method is that the width value and the element box attribute use the same measurement unit, because you do not want to add the mixed unit (200px + 10%, just for example, this method does not make any sense in the content )!

If the width of the available space is unknown, for example, in the stream layout, this method does not work because the percentage and pixel cannot be added. In this case, the solution is to set the width of the element to 100%, and set the padding, border, and margin value for its nested elements. This nested element does not set the specific width and can display the required padding, border, and margin without interfering with the parent element.

 

The premise of this article's box model is the box model of block-level elements, which is explained in the following aspects:

1) in the standard stream state, the width is not declared for the element. The element width defaults to the width of the parent element. Once the width is declared, it will be displayed with the declared width. If the width exceeds the parent element, overflow will occur, and the overflow part will not be hidden.

In this example:

Code in html:

<Div class = "box1"> <Div class = "box2"> Elements in Standard Flow </Div> </Div>

 

 

 

 

 

Code in CSS:

. Box1 { Width: 200px; Height: 200px; Background-color: pink; } . Box2 { Height: 100px; Padding: 10px; Background-color: blue; Color: white; }

 

 

 

 

 

 

 

 

 

The display in Firefox is as follows:

 

. Box2 {

Width: auto;

Height: 100px;

Background-color: blue;

Color: white;

Float: left;

}

 

 

 

 

 

 

The result is as follows:

 

It can be seen that when the width of the blue box (box2) is auto, it will not keep the same width as its parent box, but tightly wrap its content area.

3) If both the parent box and child box are set to float, the width of the parent box will be consistent with that of its parent element in IE7 and earlier versions without setting the width; wrap its child elements tightly in other browsers.