CSS layout-powerful negative margins

The negative margin (negative margin) in CSS is a common technique in layout, so long as it is used properly, it often has unexpected effects. Many special CSS layout methods rely on negative margins, so mastering its usage is a must for the front-end students. This article is very basic, the veteran can skip over.

The effect and effect of negative margins in normal document flow-affects the position of elements in the document flow

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. Look at the following picture:

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.

For example, a block element that does not have a height set, its height is automatic, 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 affects 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 , which 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.

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.

The influence of the left and right negative margins on the width of the element

negative margins not only affect the position of the element in the document flow, but also increase the width of the element!

The premise of this effect is that the element does not set the Width property (of course width:auto is possible).

For example, the black-gray part is a block element, it does not set the width. It is wrapped in a parent element with a width of 400px and centered horizontally.

Now set a margin-right:-100px for this element; (for the time being, it would have moved 100px to the left.) Right transparent, now to the right and add 100px, increase the width. ）

We see that its width does grow 100px; and then it sets a margin-left:-100px;

We see it getting wider.

The negative margin changes the width of the element, which is really confusing, and if the negative margin changes the position of the element in the flow of the document or is well understood, then changing the width of the phenomenon is actually quite incredible.

What's the use of the goods? Let me give you an example.

How do you want to create a couple of elements in the black box that are sorted in order, with some spacing between them? , of course, the simplest and easiest way is to use floating. Do we have to float the child elements in the black box to the left and then set a suitable margin-right? However, because the width of the outer black box is fixed, that is, the width of the four sub-elements and the width of the three-column interval, so the sub-elements near the right edge should not have a positive margin-right, otherwise this line can only accommodate three sub-elements. Some people say it's not easy, add a class to the child elements near the right border, and set the Margin-right to 0. This is certainly possible, but if these child elements are dynamically output through a loop in a template, then you have to determine which child elements are close to the right boundary at the time of the loop, and if so, add a class. Would that be a bit of a hassle? So the solution is to increase the width of the parent container of the child element, so that it can accommodate four child elements in a row and a width of four columns, and then the outermost black box of the container will be set to a overflow:hidden. It says that the negative left and right margin can increase the width of the element, so it is possible to set a proper negative margin-right for the parent container of the child element. Of course you can also set the width of the parent container of the element directly in the CSS, just to illustrate that the negative margin is also a method. Look at the complete code:

<style>Body,ul,li{padding:0;margin:0;}Ul,li{List-style:None;}. Container{Height:210px;width:460px;Border:5px Solid #000;}ul{Height:210px;Overflow:Hidden;Margin-right:-20px;}/*a negative margin-right, equivalent to the UL width increased by 20px*/Li{Height:100px;width:100px;background:#09F;float: Left;Margin-right:20px;Margin-bottom:10px;}</style><Divclass= "Container"><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><Li>Child element 7</Li><Li>Child element 8</Li></ul></Div>

influence of negative margins on floating elements

The effect of negative margins on floating elements and negative margins on elements in the document flow is virtually the same. The position of the element in the document flow is determined by the direction of the document flow, and the floating element can also be seen as having a "floating flow", although the floating stream can be either left or right.

For example, there are three left-floating elements, with a width of 100px:

Now set them all to a margin-right:-50px; And then it will look like this:

(Reverse understanding is good, the original words are all enlarged right shift, now left, and covered up.) ）

We see that the elements that follow are stacked onto the previous element.

Then look at the following figure:

We narrowed the browser down and then the element 3 fell because it was not wide enough. We set a margin-left:-80px for element 3; see what happens.

Continue to stack forward

Then we see that element 3 goes up, and it also covers part 2 of the element. Continue with element 3 set to margin-left:-100px

Element 3 is then completely covered by element 2, when element 3 is set to: margin-left:-200px:

We see element 3 continue to move to the left and overwrite element 1.

Now it must be clear to everyone that the negative margin affects the position of the floating element. So what the Holy Grail layout, the double-wing layout, or whatever it sounds like, is all done using this principle. Is that an element is written in the back, but it can be in front of the browser when it is displayed by a negative margin . We can talk about this later.

Influence of negative margins on absolute positioning elements

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, and the boundary of the element itself refers to the boundary of the margin definition, so if margin is positive, Then its boundary is outward, and if margin is negative, then its boundary is inward. With this, there is a classic way to center with absolute positioning:

What I do is there is no marrgin-left:-50px;

marrgin-right:-50px, the effect is the same, odd strange I go to. Margin hit the wrong. I said the colors are different.

And it's left,top. Not around.

Look at the effect:

However, the disadvantage of this method is that you must know the height and width of the element to be centered.

<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Test</title><Linkrel= "stylesheet"href= "Test1.css"></Head><Body> <Divclass= "Div1">True center more negative margins</Div> <Divclass= "Div2">Remove the negative margin below, just a simple 50% positioning</Div></Body></HTML>
. Div1{/*true Centering*/Background-color:Red;width:100px;Height:100px;position:Absolute;Top:50%; Left:50%;Margin-left:-50px;Margin-top:-50px; }. Div2{/*remove the negative margin below, just a simple positioning*/Background-color:Blue;width:100px;Height:100px;position:Absolute;Top:50%; Left:50%;/*margin-left:-50px; margin-top:-50px;*/}

The above is simply a brief overview of the role of negative margins, more practical usage or need to think about themselves, to practice to understand. Hastily code down these words, like exams have been no habit of checking, there are mistakes please forgive and correct me.

CSS layout-powerful negative margins