Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you four applications about how to analyze the negative value of margin. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

To introduce the negative value of margin related applications, mainly from four aspects to explain to you.

Application of negative value of margin

1. Realize the CSSsprite background positioning effect on the page

For the effect of background positioning on the page, you can see my article "Comprehensive extension of the opacity of png background under IE6" about the demo example page of positioning on the page.

two。 Application in liquidity layout

Mobile layout is also known as adaptive layout, also known as non-fixed width layout. For example, WordPress's classic two-column unfixed layout is the use of negative margin values to achieve positioning, which belongs to the application of left and right margin negative values in the liquidity layout. Interested students can take a look at the style code of the framework and learn something. There is also a kind of two-column adaptation that needs to use the upper and lower negative values of margin, especially in two-column or multi-column layouts with fixed height of one column and variable height of the other.

Height is not fixed column and height fixed column staggered up and down, there are no floating attributes, height is not fixed column margin-top a negative value, the size of the negative value is the height of the height fixed column, so that the two columns on the same level. And the width is adaptive, because there is no float, so different concerns about the internal existence of the clear:both attribute, fast floating. There are no examples here, so you can put this aside for a while, because I will write a good article about the liquidity layout (width adaptive layout), and then I will talk about the application of negative margin in the liquidity layout.

3. Treatment of equilateral frame lines on tabs

The following figure shows a more common tab style, as was the case with the old Xunlei home page.

How can ◆ write such a styling effect in the simplest and most maintainable CSS code?

I've actually done a little bit of annotations on the diagram, using margin-top:-1px; to solve the problem of the border at the bottom of the tab.

As for how to write to achieve this effect, it is recommended that you click here to enter the demo instance page, which will be helpful.

Similarly, if you want to use four div to achieve five 1-pixel left and right borders, just like the effect of a table, you can use so that each div has a border of about 1 pixel, and then margin-right:-1px; or margin-left:-1px; let the borders overlap, so that the four tags to achieve the effect of 5 borders.

4. The problem of aligning pictures with text

Pictures and text are aligned at the bottom by default. So when the picture and the text are together, they are often out of alignment. Especially when the pictures are small, I see a lot of people using vertical-align:middle; alignment. The effect is good under Firefox, but under IE, although the effect is better, it is still not enough.

If the picture is a small picture of about 20 pixels by 20 pixels, and the text is about the same size as 12px, then using vertical-align:text-bottom; is a good way. Another way to achieve good compatibility is to use negative margin values. The img tag is a good tag that supports positive and negative positioning of margin in all four directions. Generally speaking, if the small icon at the beginning of the img tag is aligned with the text, img {margin:03px-3px0;} can be said to be a formula version, which can achieve good alignment effect and compatibility.

These are the four major applications that the editor shares with you on how to analyze the negative value of margin. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.