For the application of the negative margin layout in the page, the negative margin page layout

For the application of the negative margin layout in the page, the negative margin page layout

This article is reproduced from: http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html.

Today, when I wrote another layout, I used a negative value for the margin-top. I didn't use a negative value, but suddenly found that the negative value can also achieve the desired effect. Then Baidu gave me a try, I found a good article by Daniel. Now, I have learned an experience, recorded it, and shared it with students I didn't see.

The following is the text

 

Negative Numbers are always negative, negative, and denied. However, sometimes negative margin can be used to achieve amazing results. Today, the negative values of a table are applied in the page layout. The negative value here mainly refers to the negative margin.

About the principle of negative margin, we suggest you look at this article: http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

This article does not describe the principles and mainly shows several applications.

I. Fixed left and right columns and Adaptive Layout of Intermediate Columns

 

This example applies to the Adaptive Layout of left and right columns with fixed width and middle column width. Because the main part of a Web page is generally in the middle, many web pages require priority loading of Intermediate Columns, and this layout just meets this requirement.

HTML:

<div class="main">        <div class="main_body">Main</div>    </div>    <div class="left">Left</div>    <div class="right">Right</div>

CSS:

body{        margin:0;        padding:0;        min-width:600px;    }    .main{        float:left;        width:100%;    }    .main_body{        margin:0 210px;        background:#888;        height:200px;    }    .left,.right{        float:left;        width:200px;        height:200px;        background:#F60;    }    .left{        margin-left:-100%;    }    .right{        margin-left:-200px;    }

Effect:

This example applies to the Adaptive Layout of left and right columns with fixed width and middle column width. Because the main part of a Web page is generally in the middle, many web pages require priority loading of Intermediate Columns, and this layout just meets this requirement.

HTML:

<Div id = "test"> <ul> <li> child element 1 </li> <li> child element 2 </li> <li> child element 3 </li> <li> child element 4 </li> <li> child element 5 </li> <li> child element 6 </li> </ul> </div>

CSS:

body,ul,li{ padding:0; margin:0;}    ul,li{ list-style:none;}    #test{        width:320px;        height:210px;        background:#CCC;    }    #test ul{        margin-right:-10px;        zoom:1;    }    #test ul li{        width:100px;

        height:100px;        background:#F60;        margin-right:10px;        margin-bottom:10px;        float:left;    }

Effect:

Use absolute positioning to locate the div to the center of the body, and then use negative margin (half of the content width and height) to pull the center of the div back to the center of the body, which has reached the effect of horizontal and vertical center.

HTML:

<div id="test"></div>

CSS:

body{margin:0;padding:0;}    #test{        width:200px;        height:200px;        background:#F60;        position:absolute;        left:50%;        top:50%;        margin-left:-100px;        margin-top:-100px;    }

Effect:

The border-bottom value is often added to the List. The last border-bottom of li often overlaps with the outer border, which is visually unsightly and often needs to be removed.

HTML:

<ul id="test">        <li>Test</li>        <li>Test</li>        <li>Test</li>        <li>Test</li>        <li>Test</li>    </ul>

CSS:

 body,ul,li{margin:0;padding:0;}    ul,li{list-style:none;}    #test{        margin:20px;        width:390px;        background:#F4F8FC;        border-radius:3px;        border:2px solid #D7E2EC;    }    #test li{        height:25px;        line-height:25px;        padding:5px;        border-bottom:1px dotted #D5D5D5;        margin-bottom:-1px;    }

Effect:

In this example, the key is to set a large bottom padding for each box, and then use a negative margin with similar values to eliminate this height. This causes each column to overflow the container element. If the overflow attribute of the outsourcing container is set to Den den, the column is cropped at the highest point.

HTML:

<div id="wrap">        <div id="left">            <p>body,p{        margin:0;        padding:0;    }    #wrap{        overflow:hidden;        width:580px;        margin:0 auto;    }    #left,#center,#right{        margin-bottom:-200px;        padding-bottom:200px;    }    #left {        float:left;        width:140px;        background:#777;    }    #center {        float:left;        width:300px;        background:#888;    }    #right {        float:right;        width:140px;        background:#999;    }    p {color:#FFF;text-align:center}

Effect: