The effect of CSS negative margin

Original

The original Book of Jane: Https://www.jianshu.com/p/87677fd2ea34

Outline

1, negative margin on the influence of the element itself
2, negative margin in the normal document flow of the role
3, negative margin on the absolute positioning of the elements of the effect

1, negative margin on the elements of their own influence 1.1, on their own width of the effect

Add width to negative values with margin--can be used for multi-column layouts to increase margins so that you do not need to increase the width or set margin-right:0 separately;

<! DOCTYPE html>
1.2, the impact on their own height
A negative value of 
 Margin-top does not increase height, it only produces upward displacement. A negative value of 
 Margin-bottom does not produce a displacement, and it reduces its own height for CSS reads. 
 For example, a block element that does not have a height set, its height is automatic, and in particular it is determined by the final position of the document flow inside it. Suppose that there is a child element in the document flow, height is 100px, then the height of the parent element is equal to the height of the child element 100px, if the child elements continue to increase, then the parent element will also be increased. However, if the child element is set to a negative margin-bottom, such as -20px, because the negative margin will affect the document flow, the height of the document flow is from the top of the parent element to the bottom of the child element, and now the child element has a margin-bottom:-20px; It is equivalent to the document flow to back up 20px, so that the entire document flow height is reduced by 20px, then the height of the parent element will also be reduced 20px. In ie8+ and those standard browsers, this also requires the parent element to have a Overflow:hidden property, because the parent element's height is changed, but the height of the child element is not changed, so the child element needs to be out of hiding, but even if the Overflow:hidden is not set, The height of the parent element is also smaller, except when the child element's height exceeds the parent element. It is not required in IE6, but it needs to trigger its Haslayout property. So the above-mentioned multi-column high-level layout is the use of this principle to achieve. 
<style>    #box {        width:50%;        Margin-bottom: -25px;        Background-color:rgba (243, 151, 0.8);        height:50px;    }    </style>    <div id= "box" >        box    </div>    <script src= "http://cdn.bootcss.com/ Jquery/2.1.1/jquery.js "></script>    <script>    var x = $ (' #box '). Height ()    console.log (x );    </script>
2, negative margin in the normal document flow of the role
Those elements that are not out of the document flow (meaning that not floating elements are not absolute positioning, fixed positioning elements, etc.), whose position in the page is the change of the follower's document flow.
As a summary, the negative margin element does not break the document flow of a page without using float.
　　
Negative margins affect these document flow-controlled elements by offsetting their position in the document flow, but this offset is different from relative positioning, and by relative positioning the offset will still hold the space it originally occupies and will not allow other elements of the document flow to take advantage. An element that is offset by a negative margin discards the space occupied before the offset, so that other elements in the document flow behind it will "flow" to fill the space.
Let's illustrate it by example. Now we have a negative margin margin:-10px in the block element, the inline element, and the Inline-block element. See what happens:
As we can see, the black-gray block elements seem to be embedded in the bounds of the browser window to the left and the top 10px, and then the text below the block element has climbed to it, and the element to the left covers a word in front of it, and the text behind it is partly covered in it, The change of position of Inline-block is also obvious.
Well, I believe it is clear that the negative margin seems to reduce the size of the element in the document flow, but in fact, its size does not change, but the document flow in the calculation of the position of the element, the negative margin will be considered to reduce the size of the element, because the location has changed. It's just a very figurative metaphor to help you understand. Also note that the document flow can only be the back of the flow ahead, that is, the document flow can only flow to the left or upward, cannot move down or to the right.
So, as long as everything is determined by the flow of documents, negative margins can work.
In a word, in a document flow, the final boundary of an element is determined by margin, and margin is negative when it is equal to the boundary of the element, and the document flow is just this boundary, not the actual size.
3, negative margin on the absolute positioning of the elements of the effect
The top, right, bottom, and left equivalents of an absolutely positioned element define the distance from the boundary of the element itself to the nearest positioned ancestor, which is the boundary of the margin definition, so if margin is positive, then its boundary is outward, If margin is negative, then its boundary is inward. With this, there is a classic way to center with absolute positioning:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
For an absolutely positioned element, the negative margin is then offset based on its absolute positional coordinates,
The only drawback is that you have to know how to find the width and height of the anchor element and set the negative margin value to center the browser window.
If the width and height of the uncertainty can be used
Transform:translate3d ( -50%,-50%,0);
Using the Translate3d can turn on GPU acceleration, do not use the CPU to calculate a bit of the new location, after the GPU acceleration, the GPU automatically put this element in a new "layer", directly offset the "layer" to improve rendering speed
Reference URL
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
1190000003750411
Http://www.jianshu.com/p/549aaa5fabaa
The effect of CSS negative margin