Css + div Layout-CSS box model margin Merging

Problem description:

One student sent me a question that night. The prototype is probably "A maindiv is nested with a div. class = "headr1" div and a div. class = "header2" and set background = "black" header1 to "red" for maindiv ". Header2 sets background = "blue" and sets margin-top: 10px for heder1; he expected the inner div. the top margin of heder1 has a distance of 10 PX on the top of the maindiv, but in fact there is a problem, the inner div does not show the effect he expected, the actual effect is that the maindiv is still close to the inner div. The outer margin of the entire maindiv is increased by 10px from the top of the browser"

Error Page code:

1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 Problem page Effect

On this page, <! -- Overflow: hidden; --> commented out. The result displayed on the page is the description of the problem. A large block is displayed on the top, the DIV of the outermost layer is also followed by an 80 PX margin. If this sentence is removed, it is the expected effect of my classmates.
This is also a solution I found after reading documents and asking for help online. This problem is caused by "margin merging ".

Cause:

After checking DOM results in my Google browser, I found that some browser code rendering differences caused me to go to the http://w3school.com.cn/for explanation. Finally here

I have seen the problem (the margin-top is invalid because haslayout is not obtained in the box). I searched Baidu to find out if other people have encountered the same problem, based on the various arguments, I have summarized the following points:

1. In a conventional Document Stream, the vertical margin adjacent to two or more block-level box models is collapsed. The final margin value calculation method is as follows:
   A. All values are positive values. The vertex is used;
   B. if not all values are positive values, take the absolute value and subtract the maximum value from the positive value;
   C. If there is no positive value, take the absolute value and subtract 0 from the maximum value.
   Note: The adjacent box model may be dynamically generated by DOM elements and has no adjacent or inheritance relationships.
2. In the adjacent box model, if one of them is floated, the vertical margin will not be folded, even between a floating box model and its child elements.
3. The margin between the element with the overflow attribute set and its child elements will not be folded (except for the value of overflow being visible ).
4. The box model with absolute position: absolute is set. Vertical margin is not folded, and is even the same with their child elements.
5. If you set the display: inline-block element, the vertical margin will not be folded, or even be the same as their child elements.
6. If the upper and lower margin of a box model are adjacent, its margin may collapse and overwrite it (collapse through. In this case, the position of an element depends on whether the margin of its adjacent elements is folded.
   A. If the element's margin and its parent element's margin-top fold together, the boundary definition of the box model border-top is the same as that of its parent element.
   B. In addition, the parent element of any element does not participate in the margin folding, or only the parent-bottom is involved in the calculation. If the border-top of an element is non-zero, the boundary position of the element is the same as that of the original element.
   The margin-top of an element that applies the cleanup operation will never fold with the margin-bottom of its block-level parent element.
   Note that the positions of elements that have been folded and overwritten do not affect the positions of other elements that have been collapsed. Only when you locate the child elements of these elements, border-top boundary position is required.
7. The vertical margin of the root element is not folded.

Solution:

• Add overflow: hidden to the parent div;

• Change the margin of margin-top to the padding of padding-top;
• The parent element produces a padding with overlapping margins or a border with a width of not 0 and a style of not none.
  Parent layer div plus: padding-top: 1px;
  Let the parent element generate a block formating context. The following attributes can be implemented:
• * Float: left/right
• * Position: absolute
• * Display: inline-block/table-cell (or other table types)
• * Overflow: hidden/auto
• Parent layer div plus: position: absolute;

Stop it!

Note: The summary in this article is also the hard work of other online predecessors. I borrowed some knowledge here and made a statement: My reference blog addresses include:
Http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html

Http://hi.baidu.com/jmtbai/blog/item/a91a136ca2d098eb42169456.html

Another point is that I think it is necessary to mention that this effect does not appear in Google in IE. I found some information about the rendering principles of IE browser:
HasLayout: http://baike.baidu.com/view/2945869.htm