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

This article mainly introduces "how to achieve the negative margin effect of CSS". In daily operation, I believe that many people have doubts about how to achieve the negative margin effect of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to achieve the negative margin effect of CSS". Next, please follow the editor to study!

01. [negative margin] effect of negative margin. Note that the left and right negative margins are not consistent. When the left is negative, it is moving to the left, and when the right is negative, it is the left pull. Up and down is similar to left and right.

02. [shape-outside] ❤ don't flatter yourself. You think you are square, but in the eyes of others you are round

03. [BFC applications] BFC applications prevent outer margins from merging (margin collapsing)

04. [BFC applications] BFC applications to eliminate the impact of floating

05. [flex is not one of the cognitive features] the magical use of margin:auto in flex layout

06. [flex is not the second characteristic of cognition] flex layout, when the sum of flex-grow is less than 1, only part of the remaining space can be allocated proportionally, but not all.

07. [width of input] does not automatically fill the width of the parent element by setting display:block for the element. The exception is input, whose default width depends on the value of the size property

08. [positioning characteristics] when absolute positioning and fixed positioning, setting both left and right is equivalent to implicitly setting width

09. [cascading context] cascading context: the younger generation is the younger generation, no matter how powerful it is, it is only a junior generation.

10. [stickiness positioning] position:sticky. For stickiness positioning to work, you need to set the final retention position. Chrome is as perfect as bug,firefox.

11. [neighboring sibling selector] Common scenarios of neighboring sibling selectors

12. [modal box] to make the background of the modal box transparent, using rgba is a simple way

13. [triangle] the principle of drawing triangles by css

14. [table layout] display:table implements multi-column contour layout

15. [color contrast] ❣ blue background red letter, because the color contrast is relatively low, so it can not see clearly, so it is not a good color scheme

16. [fixed aspect ratio] the principle of ♥ css to achieve a fixed aspect ratio: the percentage of padding is relative to the width of its containing block, not the height.

17. [animation direction] you can select alternate for the animation direction, and go back and forth alternately.

18. [linear gradient Application] the principle of drawing ribbon with css

19. [hiding text] two ways to hide text content

20. [centring] A simple way to achieve centring

21. [angular gradient] A new gradient: angular gradient. It can be used to realize pie chart.

22. [percentage of background position] correct understanding of the percentage of background-position: the percentage position of the image itself coincides with that of the container.

23. [background repeat new value] New background-repeat attribute values: round and space. The former means to put together a whole, while the latter means to leave a little seam.

24. [background attachment] background-attachment specifies how the background is attached to the container, and note the use of its attribute values local and fixed

25. [animation delay] add delay time to animation to make the pace inconsistent

26. [outline] you can use outline to stroke, it doesn't take up space, it can even be in it

27 [background positioning] when the fixed background does not scroll with the element, the background positioning is relative to the viewport

28 [tab-size] the browser shows that tab is 8 spaces by default, and tab-size can specify the length of spaces.

29 [animation pause] CSS animation can actually be paused

30 [object-fit] after specifying the size of the picture, you can set object-fit to contain or cover to keep the ratio.

31 [mouse status] when the button is disabled, don't forget to set the mouse state

32 [background virtual] use CSS filter to realize background virtual

33 [fill-available] set the width to fill-available so that inline-block can fill the whole space like block

34 [fit-content] set the width to fit-content, so that block can achieve the effect of shrinking width and wrapping content like inline-block.

35 [Custom attributes] simple use of CSS Custom attributes

36 [min-content/max-content] you can set the width to min-content and max-content, the former to make the content shrink as much as possible, and the latter to expand the content as much as possible

37 [progress bar] uses gradients, a div to implement the progress bar

38 you can set page-related properties when printing a web page. For example, the page-break-before property indicates whether a new page is needed.

39 [frame-by-frame animation] using CSS wizard to realize frame-by-frame animation

40 [resize] ordinary elements can also be resize like textarea

41 [bread crumbs] use before pseudo elements to realize bread crumbs

42 [sticky footer] use grid layout to implement sticky footer

43 [Animation fill status] CSS can set the state maintained before and at the end of the animation

44 [Animation negative delay] CSS animation can set the delay time to a negative number, indicating that the animation seems to have been running for such a long time before it starts

45 [transition] the magic of love turns in circles

46 [animation case] principle of water wave effect

47 [animation case] the principle of CSS pinball animation effect

48 [outline] the magic use of the outline attribute

49 [grid] Firefox grid layout detector

At this point, the study on "how to achieve the negative margin effect of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.