[Front-end study notes day23] 3.7. Tips box model and related issues

3.7. Tips box model and related issues

Tips box model and related issues

margin-related skills
1, set the element is centered horizontally: margin: the X-Auto;
2, margin negative elements so that displacement and border merger

Comprehension exercises
1, making the box a 600 * 100 pixel black border, from the top of the browser 100px, centered horizontally.
2, making the effect of the following menu:

Margin merger

The combined margins means that when two vertical margins meet, they will form a margins. The combined height equal to the margins of the larger of the two combined height of the outer margin of the occurrence. Solutions are as follows:

1, the use of this feature
2, is provided from the outer side, generally set-Top margin
. 3, or position the float element

Comprehension exercises
using div tags to make the following layout:

margin-top collapse

In the two boxes when nested inside the margin-top box provided on the outside of the box will be added, leading to the interior of the margin-top box provided fails solution is as follows:

1, a frame is provided outside of the box
2, is provided outside of the box overflow: hidden
. 3, pseudo-element class:

.clearfix:before{
    content: '';
    display:table;
}

Exercise appreciated that
were used and the spacing margin padding pitch produced the following examples: