On the application of negative margin in the layout of the page

　　This article was reprinted from: Http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html.

Write a layout today to use a margin-top is negative, it is not to use negative value, but suddenly found negative value can also reach the effect I want, then Baidu a bit, only to find a good Article Daniel, reproduced here, is to learn an experience, record, also to share to not see the classmate.

The following is the text

Negative numbers give people a sense of negativity, negation, rejection, but sometimes the use of negative margin can achieve fantastic results, and today the table a table negative in the page layout of the application. The negative value here mainly refers to negative margin.

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

This article does not talk about the principle, mainly shows several applications.

　　 one, the left and right column fixed, the middle column adaptive layout

This example applies to the left and right column widths fixed, the middle column width adaptive layout. Because the main part of the Web page is generally in the middle, many pages require an intermediate column to load first, and this layout just satisfies this requirement.

Html:

<Divclass= "Main">        <Divclass= "Main_body">Main</Div>    </Div>    <Divclass= "Left">Left</Div>    <Divclass= "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:

　　

Second, remove the right border of the list

This example applies to the left and right column widths fixed, the middle column width adaptive layout. Because the main part of the Web page is generally in the middle, many pages require an intermediate column to load first, and this layout just satisfies this requirement.

Html:

<div id= "Test" >        <ul>            <li> child elements 1</li>            <li> child elements 2</li>            <li> Child elements 3</li>            <li> child elements 4</li>            <li> child elements 5</li>            <li> child elements 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:

Three, negative margin + positioning: Horizontal Vertical Center

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

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:

Iv. removing the border-bottom of the last Li element of the list

We often add border-bottom values in the list, and the last Li Border-bottom is often coincident with the outer border, visually unsightly and often 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:

Five, multi-column and other high

The key to this example is to set a large bottom padding for each box, and then eliminate the height with a negative margin of similar value. This causes each column to overflow the container element, and if the overflow property of the outsourced container is set to hidden, the column is cropped at the highest point.

Html:

<div id= "wrap" >        <div id= "left" >            <p style= "height:50px" >style= "height:50px" </p>        </div>        <div id= "center" >            <p style= "height:100px" >style= "height:100px" </p>        </div>        <div id= "right" >            <p style= "height:200px" >style= "height:200px" </p>        </div>    </div>

Css:

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:

On the application of negative margin in the layout of the page