, Transition effect-transition
1, what is the transition
The effect of making CSS property values smooth over time
2. Grammar
1. Specify Transition Properties
Function: Specifies which property value to use when changing the transition effect
Property: Transition-property
Value:
1. Attribute Name
2. All
Any property value that can use the transition effect will use the transition effect when changing
Properties that allow the transition effect to be used:
1. All color-related properties
2. All attributes with a numeric value
2. Specify the transition duration
Function: Specifies how long to complete the transition effect
Property: Transition-duration
Value: A number in S or MS units
1s = 1000ms
300ms = 0.3s =. 3s
3. Specify the velocity-time curve function (rate) of the transition
Property: Transition-timing-function
Value:
1, ease
Default, slow start, fast speed, slow end
2, linear
Uniform
3, Ease-in
Slow start, speed up the end
4, Ease-out
Quick Start, slow end
5, Ease-in-out
Slow start and end, acceleration and deceleration in the middle
4. Specify the transition delay
Property: Transition-delay
Value: The value in S or MS units
5. Transition Properties
Property: Transition
Value: Property Duration timing-function delay
Practice:
To create an element 200
200, red background
When the mouse hovers
1. Size Changes to400
2, the background color changed to XXX
3. Turn round
Use the transition effect to achieve the above three effects in 5s, using the transition effect when the mouse is removed
2. Positioning (Focus)
1. What is positioning
Represents the position of an element in a page
2, the classification of positioning
In CSS, positioning can be divided into the following categories:
1, normal flow positioning (default positioning mode)
2, floating positioning (heavy difficulties)
3. Relative positioning
4. Absolute positioning
5. Fixed positioning
3. General Flow Positioning
Common flow positioning, also known as "document flow positioning". Is the default positioning method for all elements in the page. A typical "streaming layout"
Characteristics:
1, each element in the page has its own position, and occupy a certain page space
2, each element is arranged from the upper-left corner of its parent element
3. Each element is basically arranged in a way that falls from left to right or from top to bottom.
Block-level elements: from top to down, each exclusive row
Inline elements & Inline block elements: from left to right, not displayed until the line is changed
4, floating positioning (heavy difficulties)
1, the characteristics of floating elements
Setting the element to floating positioning will have the following characteristics:
1, floating elements will be excluded from the document flow-out of the document flow, then the element will not occupy the page space
2, non-floating elements will come forward to occupy a position
3. Floating positioned elements are docked to the left or right of the parent element or to the edges of other floating elements
4, floating can only be floating in the current line
5, floating solve the problem: let multiple block-level elements can be displayed in a row
2. Grammar
Property: Float
Value:
1. None
Default value, no floating effect
2. Left
Float to the left of the parent element, or dock on the edge of an existing floating element on the left
3. Right
Floats to the right of the parent element, or docked to the edge of the floating element already on the right
3. Special effects caused by floating
1. If the parent element does not display any of the floating child elements, the last one will be wrapped, but it may be stuck
2. Once the elements are floating, they will become block-level elements.
The elements in the row are allowed to change size once they float
3, once the element is floating, the width will be determined by the content in the case of the specified width.
4, the text, the picture, the line element is to use the wrapping way to arrange, is not to be pressed by the floating element under the
Web Full stack
