CSS art-the beauty of negative margin

CSS art-the beauty of negative margin

The negative margin (nagative margin) in CSS is a commonly used technique in layout. As long as it is used, it often produces amazing results, many CSS layout methods depend on the negative margin. It is very important for front-end kids shoes to master it.

I. Principles

Document Stream

Definition in Baidu Encyclopedia: document flow is the position occupied by objects in the document during arrangement. Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream. (You can understand the order of the document from start to end, where the document is located, or the order from top to bottom and from left to right)

Elements that are not separated from the document stream (not floating elements, not absolute positioning, fixed positioning elements, etc.), and their position on the page changes with the changes of the Document Stream. Take a look at the figure below:

The negative margin is used to offset the position of these elements in the Document Stream, but this offset is different from the relative positioning, it will still stick to the space occupied by it, and will not let other elements of the Document Stream multiply. The offset element through the negative margin will discard the space occupied before the offset, so that other elements in the Document Stream after it will "stream" to fill this space. Let's explain it through examples. Now we set a negative margin:-10px for block elements, line elements, and inline-block elements to see what will happen:

What changes have you realized? The negative margin seems to reduce the size of the element in the Document Stream, but in fact its size has not changed, only when the file stream calculates the element position, it will think that the negative margin reduces the element size, so the position will change.
Therefore, as long as everything is determined by the Document Stream, the negative margin will work.

In a word, in a document stream, the final boundary of an element is determined by margin. When margin is negative, it is equivalent to receiving the boundary of an element. The Document Stream recognizes only this boundary, it doesn't matter what your actual size is.

Influence of negative margin on element width

The negative margin not only affects the position of the element in the Document Stream, but also increases the width of the element! The premise for this function is that the element does not set the width attribute (of course, width: auto is acceptable ).
For example, the green part is a block element with no width set. It is enclosed in a parent element with a width of PX and horizontally centered.

Now set a margin-right:-100px for this element;

Vcv8tcS/7bbItcTIt7Hks6QxMDBweDvIu7rz1Nm4 + labels = "here write picture description" src = "http://www.bkjia.com/uploads/allimg/160415/0433356215-4.png" title = "\"/>

We can see that it has become wider.
How can this problem be solved? When the width of a sub-block element is set to width: auto; or (default width: auto;), the parent element is filled according to its margin boundary, if the value is set to margin: 100px, the width of the child element is reduced by PX. If the value is set to margin:-100px, the width of the child element must be increased by Px to properly fill the entire parent element.

II. Application

1. 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.

CSS:

    body{        margin: 0;        padding: 0;        min-width: 600px;    }    .container{        width: 100%;        float: left;    }    .main{        margin: 0 210px;        background-color: #1B6540;        height: 200px;    }    .left,.right{        float: left;        width: 200px;        height: 200px;        background-color: #4FA46B;    }    .left{        margin-left: -100%;    }    .right{        margin-left: -200px;    }

HTML:

                        main        

left   right  

Effect:

2. Remove the right border of the list.

A floating list is usually used to display information in a project. For the sake of appearance, a certain margin (margin-right) is usually set between each list. When the width of the parent element is fixed, the right margin of the li element on the rightmost side of each row is redundant. The removal method is usually to add a class for the li element on the rightmost side and set margin-right: 0; this method needs to dynamically determine which li elements to add class, which is troublesome !!! Using negative margin, you can achieve the following effect:

CSS:

    *{        padding: 0;        margin: 0;    }    ul,li{        list-style: none;    }    .test{        width: 320px;        margin: 20px auto;        background-color: #1B6540;    }    .test ul{        margin-right: -10px;    }    .test ul li{        float: left;        width: 100px;        height: 100px;        background-color: #4FA46B;        margin-right: 10px;        margin-bottom: 10px;    }    .clearfix:after{        content: "";        height: 0;        display: block;        clear: both;    }

HTML:

• Child element 1
  • Child element 2
    • Child element 3
      • Child element 4
        • Child element 5
          • Child element 6
           

          Effect:

          3. Align the negative margin with the absolute vertical orientation

          The prerequisite is that the width and height of the child element are known.

          CSS:

              .container{        width: 500px;        height: 500px;        margin: 20px auto;        background-color: #1B6540;        position: relative;    }    .inner{        width: 200px;        height: 200px;        position: absolute;        left: 50%;        top: 50%;        margin-left: -100px;        margin-top: -100px;        background-color: #4FA46B;    }

          HTML:

          4. High Columns

          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.
          CSS:

              *{        padding: 0;        margin: 0;    }    .container{        overflow: hidden;        width: 500px;        margin: 20px auto;    }    .left,.mid,.right{        margin-bottom: -200px;        padding-bottom: 200px;    }    .left {        float: left;        width:  100px;        background: #4FA46B;    }    .mid {        float: left;        width: 300px;        background: #1B6540;    }    .right {        float: right;        width: 100px;        background: #4FA46B;    }    p {color: #FFF;text-align: center}

          HTML:

          height:50px

           

          height:100px

           

          height:200px

          Effect:

          5. Remove the border-bottom of the last li element in the list.

          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.

          CSS:

              *{padding: 0;margin: 0;}    ul,li{list-style: none;}    .container{        width: 500px;        margin: 20px auto;        background-color: #84D0AA;        border: 3px solid #FF6798;        z-index: 999;        overflow: hidden;    }    ul li{        height: 30px;        line-height: 30px;        border-bottom: 1px dotted #fff;        padding: 5px;        margin-bottom: -1px;    }

          HTML:

          • Test
            • Test
              • Test
                • Test
                  • Test

                  Effect:

                  NOTE: If overflow: hidden is not added to the parent element with a border, the border overlaps with the border of the child element li tag, as shown below: