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

Most people do not understand the knowledge points of this article "layout style and transition change method in Css", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "layout style and transition change method in Css" article.

1. Positioning mode position

Static: default, elements are ordinary elements, document flow positioning, from top to bottom

Relative (relative): the position of the element is relative to the ordinary position, the position before the displacement of other elements can not be used, generally do not make much change, to fine-tune the position of an element, can only use top,left I feel that he is moving relative to his previous position

Fixed (fixed): relative to the browser window to locate, the position before the displacement will not be occupied, up and down can be used, small advertising commonly used, scroll bar constantly moving, his position remains the same, he will leave the document stream, floating on the document stream, he this up and down is relative to the edge of the position, for example: top50px is not moving up the 50px Instead, the distance of the element relative to the top border 50px setting buttom can also be used, and pulling the scroll bar will not change the position

Absolute (absolute): an ancestor element whose relative position value is not static determines the child element according to the ancestor element change according to whom the ancestor element cannot change for static, and who cannot be static (default is static), which occurs between the parent and son or between the ancestor element and the descendant element.

two。 Positioning layout

Top/bottom/left/right

3. Z-index

It is used to set the number of display layers of elements and elements, both positive and negative.

Must be used with position

Transition, deformation

1. Transition

Transition: elements gradually change from one style to another

Attributes:

Transition-delay: set the delay before transition

Transition-duration: setting transition time

Transition-property: set the properties of transition participation

Transition-timing-function: transition rate (linear uniform)

Transition: shorthand (property duration timing-function delay)

Reverse transition:

Set it in hover, paste it into div, and that's fine.

two。 Deformation

Transform: specify how to deform

Transform: scaleX/Y (1.5) zooms by 1.5x

Transform: rotate (360deg) rotates 360degrees deg represents degrees, which works well with the transition time

Transform: skew (X-axis angle, Y-axis angle) angle of tilt

Transform: the distance translate (X-axis distance, Y-axis distance) moves

The above is about the content of this article on "layout style and transition method in Css". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.