1. margin container sizes can be changed.
2. margin percentage units. Percentage margin (common elements with respect to the width of the parent are calculated,
Absolute positioning element percentage margin is positioned relative to the first ancestor (relative / absolute / fixed) width calculation. )
Examples: width and height 2: 1 rectangular adaptive
.box { background-color: olive; overflow: hidden; }
.box > div { margin: 50%; }
3. The correct view of the margin of overlapping css.
Margin calculation rule: 1. large positive value candidates for admission. 2. The sum of positive and negative values. 3. The most negative negative negative value.
Examples: .list {margin-top: 15px; margin-bottom: 15px;}, the spacing of upper and lower margin of the overlapping properties.
4. appreciated that the margin auto css.
img {display: block; width: 200px; margin: 0 auto;} / * * horizontally centered image /.
Div element disposed vertically centered. (Changing the direction of the flow of writing-mode. Follows :)
<div class="father">
<div class="son"></div>
</div>
.father { height: 200px; width: 100%; writing-mode: vertical-lr; }
.son { height: 100px; width: 500px; margin: auto; }
/*************************/
Absolute positioning vertical centering.
.father { height: 200px; position: relative; }
.son { position: absolute; top: 0; right: 0; bottom: 0; left:0; width: 500px;height:100px; margin: auto; }
/*********************************************************************/
margin negative targeting. (Margin negative value to change (increase) the size of the space.)
Justify 1.margin under negative.
<div class="box">
<div class="ul">
<Div class = "li"> a list </ div>
<Div class = "li"> List two </ div>
<Div class = "li"> list of three </ div>
</div>
</div>
.box{ width: 1200px; margin: auto; background: orange;}
.ul { overflow: hidden; margin-right: -20px;}
.li { width: 386.66px; height: 300px; margin-right: 20px; background: green; float: left;}
/****************************************************************************************************/
2. margin of the layout of the high negative value.
例一： <div style="height: 200px;">
<img height="300" style="margin: 50px 0;">
</div>
例二： . box { overflow: hidden; resize: vertical; }
.child-orange, .child-green { margin-bottom: -600px; padding-bottom: 600px;}
.child-orange { float:left; background: orange; }
.child-green { float:left; background: green; }
/*****************************************************************************************/
Adaptive two-column layout under 3. margin negative.
<div style="float:left; width: 100%;">
<P style = "margin-right: 170px;"> text on the left, to the right of the picture ...... </ p>
</div>
<img width="150" style="float: left; margin-left: -150px;">
// margin increased negative spatial dimensions, margin size value to reduce the space.
/***********************************************************************/
Invalid margin situation.
Vertical margin 1. inline elements is invalid.
2. margin overlap.
3. display: table-cell; margin is invalid.
/**************************************************************************/