Deep understanding of CSS box models

Preface: In the front of a project, in the layout of the page encountered a small problem, so on the StackOverflow to help. Ifaou to help me solve my problem, also recommended me to read a CSS box model of the article "The CSS Box models", after reading a great deal of benefit, only to know that their knowledge of the box model is still so lacking. Coincides with the end of the semester, the project after the acceptance of temporary, there is free time. So want to translate this article, on the one hand to give yourself a bit of challenge and exercise, on the other hand also for reference, let more people benefit.

This article is suitable for junior web design friends, so you have a closer understanding of the box model. But before reading this article you should have a certain understanding of the basic knowledge of box model HTML, otherwise it will only make you more foggy. This article does not like a lot of Chinese tutorials, the box model inside the margin, the margin, how to locate the concept of a methodical introduction. This article is more to teach you how to control the width of the box in the actual combat process, how to use the most appropriate way to locate the box, how to solve the various bugs in IE box.

The reason why I translated this foreign article, because I also found in the process of learning, foreign tutorials and over the past, they give people to fish, but also to the people to give. Different from the domestic tutorial there are chapters there are some articles, their narrative approach is closer to the way of conversation-like ... All in all, the goal is to give more beginners a little inspiration and help, do not have to walk like me a lot of detours.

This is my first translation, there is a lack of places please correct me. I try to make it easy to understand, but also to add some of my own language, and to help understand the diagram (for the sake of fluency, it is not otherwise expressed). Attached original address: Http://reference.sitepoint.com/css/boxmodel

In-depth understanding of CSS box models (the CSS box model)

If you understand the concept of box model and how it determines the final size of an element, it will help you understand how an element is positioned on a Web page. The box model is primarily intended for block-level elements. By the way, there is a concept associated with this: inline layout model--defines how inline elements are positioned and is specified in the inline element format (inlineformatting)

Calculation of the size of the box (calculating boxdimensions)

In CSS2.1, block-level elements can only be rectangular shapes. When we need to calculate the overall size of a block-level element, we need to simultaneously calculate the width of the content area [Note 1], along with the margins of this element, the padding, and the bounding rectangle.

[Note 1]: This article frequently mentions the content and content area of the two concepts, although literally can be understood as the contents of the box, but from the narrative in the later, the two concepts are still different, until this article published, I am still confused about the difference between the two, I hope that interested in reading the original friend can leave a message to tell me the difference between the two, so that I am more in the text of the error.

We can define the width and height of the content of an element by declaring a width and height. If you do not make any declarations, the default values for width and height will be automatic (auto)

The diagram for the box model on W3Schools is as follows

At the bottom of the graph, there is a very important word important:when you specifythe width and height properties of an element with CSS, which is just settingthe WI DTH and height of the content area. That is, when we design a block-level element's width and height properties in CSS such as. box{width:100px; height:100px}, the width of the and height are only set on the Content section, which defines the length and width of the area within the dashed box under padding. Instead of the contents, padding, and the sum of the borders (but in earlier versions of IE, including IE6, the width and height of the box model are precisely defined, although they conform to the logic of thought, but do not conform to the specification, which can cause serious problems)

For a static (static) anchored element with a width of automatic states (that is, no positioning), and relative positioning (relatively positioned) elements, the method of calculating the width is to include them in the block (containing block) [Note 2] the width minus all margins, padding, borders, and scroll bars of this element's landscape. That is, the width of the element's horizontal margin, padding, border, scroll bar (if present) is removed from the width of the containing block, and the remaining values are the same.

[Note 2]: Contains blocks (containing block). If you know the implementation principle of absolute positioning and relative positioning, this annotation can be ignored. The containing block can be understood as a rectangle, and the function of the rectangle is to provide a reference for the elements contained within it, and the size and position of the inner element is often determined by the containing block where the element resides. For example, in absolute positioning, the ancestor element that is closest to its location (position to fixed,relative or absolute) is the containing block. This is a relatively elementary concept, do not delve into, please Baidu.

The positioning properties and dimensions of the containing block are used as references for the positioning and sizing of descendant elements. Although the positioning of elements must be anchored to their block-level elements, they are not restricted to it. The elements of the descendant can also overflow the containing block. In most cases, generated boxes[Note 3] usually plays the role of a descendant element that contains a block. To fully understand the extensive details of the included blocks, click containingblock

[Note 3]: Do not know generated boxes should be how to translate, have to know friends please inform, thank you

For floating (floated) and absolute positioning (absolutelypositioned) elements, including fixed positioning (fix) elements, the width of the auto state causes the generated Box shrinks to its content size.

I think I need to summarize the meaning of the first two paragraphs here, the first two paragraphs are said in the case of the width default (auto), the box model automatically set the width of two ways.

We know that when we place a block-level element on the page and do not set its positioning property (relative,absolute,fixed), that is, position:static, or if position:relative is set, The width of the block is an extension that fills the width area of its parent element automatically

As an example:

The following is the referenced content: . box1 { Background:black; Color:white; height:100px; padding:10px; border:20px solid Red; margin:30px; }

Note. Box1 does not set any of the position properties, nor does it have a width property. This is for experimental relative positioning or no positioning.

HTML code:

The following is the referenced content: <div class= "Box1" >for floated or absolutely positioned </div>

The result is:

That is, the width of the block is an extension that fills the width area of its parent element automatically.

So when we're calculating the width of an element in a package, we just need to subtract the element's margin, border, padding, and scrollbar from the parent element, and the rest is its width, because it's automatically populated. Although this basically has no practical application to say ...

But floating floated elements and absolutely positioned elements, their results are exactly the same, they shrink so they wrap around the content, as well as an example

The following is the referenced content: . box2 { Background:black; Color:white; height:100px; padding:10px; border:20px solid Red; margin:30px; Position:absolute; }

The same does not set the width, but the absolute positioning of the HTML code:

The following is the referenced content: <div class= "Box2" >for floated or absolutely positioned </div>

Results:

Floating Elements and widths

Previously, in CSS2, there were no floating elements that declared width and would not shrink and live their contents snugly (shrink to wrap), but rather they would continue to extend to their parent element at the maximum width. This behavior is replaced by contraction and CSS2.1. However, in IE6 and earlier versions of the browser, a floating element that does not declare a width will still shrink its contents as a default setting, unless the child element has its own layout (has a layouts) [Note 3], for example, in this case, The parent element stretches to fit the width of the content available in the parent element

[Note 3]: "One of the reasons that IE behaves differently from other browsers is that the display engine uses an internal concept called layout .... ie on Windows uses layout concepts to control the size and positioning of elements. Those elements that "have layout" are responsible for the size setting and positioning of themselves and their child elements. If an element "does not have a layout", its size and position is controlled by the most recent ancestor element that owns the layout ... Layout is the source of many IE display bugs--from the CSS Mastery Advanced webstandards Solutions (Second) from Andy Budd, Simon collision, Cameron Moll Edition) (Master of CSS Advanced Web Standard Solution Second Edition)

As mentioned above, for non-declared width of the floating element, in the IE6 and previous versions are to take the behavior of contraction and close to the content, so this argument is not verified, I also tested under the Ietest, it is true

It should also be noted that when a floating element (without a declaration width) contains a child element that floats to the right, it also automatically extends the padding to fit the width of the content available to the parent element. This is the case in the previous IE browser, including IE7 (previous Firefox, including the 2.0 version of this bug, but this issue has been resolved in the Firefox3.0 Alpha 6 version).

I have also written an example for the above paragraph to you:

The following is the referenced content: <div class= "Parent" > <div class= "Containing-block" > <div class= "box" >for floated or absolutely positioned </div> </div> </div>

Control one side of the paragraph: the first is a floating element containing-block, contains a right floating child element box, the parent element is parented ...

The following is the referenced content: . box { Background:black; Color:white; height:100px; padding:10px; border:20px solid Red; margin:30px; Float:right; } . containing-block { Background:blue; height:250px; Float:right; } . Parent { Background:gray; height:300px; width:500px; }

Running the results in Firefox is:

But the effect of running with IE5.5 in IETester is:

Therefore, in order to avoid the above mentioned bug, if possible, try to specify a specific width value for a floating element, will always be more secure. In any case, as long as you always notice the above mentioned issues, you may find that the non-width of the float in some cases is still very useful, such as the horizontal flow (fluid-width) Layout menu

Regardless of how the content area is positioned, if the height, minimum height (min-height), Maximum height (max-height, etc. are not declared, the content area height is equal to the height of the content [Note 4].

[Note 4]: Here is where I have doubts about the content area and content, I do not know if there are any friends can help me to see, help me explain

So, when you want to find out how much size you need to put an element on the page, add the contents to the content area with the declared padding, border, and margin values. Of course, if an element does not have an inner margin, a border, or an outer margin, then its size is only determined by its contents.

If an element contains only floating or absolutely positioned elements, it has no slightest content, and its height will be 0. We will do more discussion in floating and clearing

Implement the Box model

The best way to illustrate the box model is to use a short example. Let's take a look at how much size we need to put an element on the page (ignoring the overlay of the margin first--here's a more detailed explanation for this):

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

Here is our CSS sample-declaring the box's properties for an element of the class named ' Box ':

The following is the referenced content: . box { width:300px; height:200px; padding:10px; border:1px solid #000; margin:15px; }

The dimensions of the above elements are calculated in total:

Total Width = 1 + + + + 1 + + = 352px

Total Height = 1 + + + + + 1 + = 252px

The above calculations are described in Figure 1, which is a graph cut from the Firebug element layout display.

In Figure 1, we can see clearly that the content area is centered, around the inner margin area of the content area, the bounding area, and the margin area. The outer edge of the content area is called the content edge (contents edge), or the inner edge (inner edge), and the outer edge of the inner margin area is called the margin edge (padding edge); the outer edge of the bounding area is called the border edge (border edge); The outer edge of the margin area is called--you should have guessed--margin edge or outer edge (outer edge)

As you can see from this short example, in order for this element to fit into this page, we need an area of at least 352px width and 252px height. If the available area is less than this, the element will be misaligned or overflow its containing block. Notice that in IE6 or earlier versions of the browser, in this case, the extra height of the containing block is stretched to accommodate the content area, which obviously disrupts the layout of the page. But other versions of the browser cause the element to overflow its bounds while ignoring the content.

This bug translates: "If the element's content is larger than the element itself, then we want the content to overflow outside the element." However, in IE6 and earlier versions, elements with layouts are incorrectly expanded to fit the size of the content ... This error means that the width of IE in window is actually more like Min-width "--andy Budd, Simon collision, Cameron Moll's CSS Mastery Advanced WEB Standards Solutions (Second Edition) (Proficient in CSS advanced Web Standard Solution Second Edition), to show you, very simple:

The following is the referenced content: <div class= "Iebug" > <p>your Understanding of the box model concept, and how it relates to the on which an element, final dimensions is determined, </p> </div>

. Iebug { Background:yellow; width:100px; height:100px; }

Test results under Firefox:

IE6 Test Results:

Pay attention to the outer margin superposition effect

Although the margin is already included in the calculation in the example of the area size required for the calculated element above, it is important to note that the adjacent margins of the longitudinal no-positioning (static) element are superimposed into the value of one of the larger outer margins of the width, not the sum of the two. This means that when the calculation actually needs to hold the size of an element's area, it does not start with the edge of the margin, only the widest margin will take effect, and the narrower margins will overlap with the larger ones, read collapsingmargins To learn more about this rather complex topic.

Real Box Model application

It is important to note that when the width of an element is set to 100% (that is, the content width of the parent element is 100%), it should not have any margin, padding, or border, which will only make the area where it is placed needs to be larger. This is often overlooked by the designers and seriously disrupts the layout of the page, so that the content either overflows or makes the elements wider than they should be

The following is the referenced content: <div class= "contain" > <div class= "box" ></div> </div>

There are no margin and padding, only CSS in the case of width:

The following is the referenced content: . box { Background:black; width:100%; height:100px; } . contain { Background:yellow; height:120px; width:200px; }

Effect:

Visible in the absence of margin and padding, 100% of the content can be just right to fill the parent element

Once the margin and padding (margin:10px;padding:10px;) are added, the effect

Layout diagram in Firebug:

After adding the margin and padding, the element is mangled and only the margin on the left is displayed.

The workaround is, in most cases, avoid adding a specific value to the wide attribute (never automatic), and apply only margins, padding, and borders. The width of the no anchor element will default to Automatic. Even if you define an inner margin, border, margin, it still thinks the available content is full-full.

Of course, this method may fail for some examples, such as when an element is not a non-anchored element, and it does require a specified width (as is the case with the floating element not automatically populating its parent element). In these cases, you have two choices.

If the available area is fixed width, you can simply add the width of each attribute element (margin,padding, etc.) to match the available fixed width. For example, if the width of the available area is 500px, and you need an element with a 20px padding, simply set the width of the element to 460px and the padding to 20px (20+460+20=500). The prerequisite for this approach is that the width value and the element box properties are used in the same unit of measurement, because you don't want to add the blending units (200px + 10%, just for example, it's meaningless in the content).

When the width of the available content area is unknown-for example, in streaming layouts (fluid layout)-this method is not feasible because percentages (percentages) and pixels (pixels) cannot be added together. In this case, the workaround should be to declare a 100% width value for the required element, and set the value of the padding, border, and margin to a nested element. This nested element does not have any width value declarations and can show the required padding, borders, and margins without interfering with the parent element. [Note 5]

[Note 5] Well, in fact, I don't understand this passage ...

Now you should be able to understand the CSS box model clearly.

PostScript: Due to my limited level, many places may be translated is not very popular. Just hope to play a role, have more friends to improve it, point out that I translate and understand the wrong place. If time permits, I continue to translate some of the column articles related to this (i.e. the links in this article).

Finally recommended to you Andy Budd, Simon collision, Cameron Moll wrote "CSS Mastery Advanced WEB Standards Solutions (Second Edition)" (Proficient in CSS Advanced Web Standard Solution Second Edition), translated this article in the reference to many of the content, which is also a suitable CSS advanced books, not suitable for beginners. Hope that interested friends can refer to.

Deep understanding of CSS box models