web full stack

, transition effect - transition
1. What is the effect of transition
that makes the CSS property value change smoothly over a period of time
2. Syntax
1. Specify the transition property
function: specify which property value to use when the transition effect
property changes: transition-property
takes Values:
1. Attribute name
2. All, all attributes
that can use transition effects will always use transition effects when changing. Attributes that
allow using transition effects:
1. All attributes related to colors
2. All attributes whose value is a number
2 , Specify the transition duration
Action: specify how long to complete the transition effect
Attribute: transition-duration
value: a number in s or ms
1s = 1000ms
300ms = 0.3s = .3s
3. Specify the speed-time curve function of the transition (Rate)
attribute: transition-timing-function
Values:
1, ease
default value, slow start, fast become fast, slow end
2, linear
uniform
3, ease-in
slow start, acceleration end
4, ease-out
Quick start, deceleration end
5, ease-in-out
slow start and end, first accelerate and then decelerate
4. Specify the transition delay property
: transition-delay value : a value in
s or ms 1. The size becomes 400 400 2. The background color becomes ××× 3. It becomes a circle . Use the transition effect to complete the above three effects within 5s. When the mouse is removed, use the transition effect to change to the original state 2. Positioning (emphasis) 1. What is positioning means the position of an element on the page 2. Classification of positioning In CSS, positioning can be divided into the following categories: 1. Ordinary flow positioning (default positioning method) 2. Floating positioning ( 3. Relative positioning 4. Absolute positioning 5. Fixed positioning 3. Ordinary flow positioning Common flow positioning, also known as "document flow positioning". is the default positioning method for all elements on the page. Typical "flow layout" features: 1. Each element has its own position on the page and occupies a certain page space 2. Each element is arranged from the upper left corner of its parent element 3. Each element Elements are basically block-level elements arranged left-to-right or top-down: top-down, each on its own line



























Inline Elements & Inline Block Elements: Arrange from left to right, and only wrap when it cannot be displayed.
4. Floating positioning (difficult and difficult)
1. Features
of floating elements Setting the element to floating positioning will have the following characteristics:
1. Excluded from the document flow - out of the document flow, the element will no longer occupy the page space2, unfloated elements will take place in
front of them3
, floating positioned elements will be docked to the left or right of the parent element or other floating On the edge of the element
4. Floating can only float on the current line
. 5. Floating solves the problem: allowing multiple block-level elements to be displayed in one line.
2. Syntax
attribute: float
value:
1.
The default value of none, without any floating effect
2 . , left
floats to the left of the parent element, or docks on the edge of an existing floating element on the left
3. Right
floats to the right of the parent element, or docks on the edge of an existing floating element on the right
3. Special effects caused by floating
1. If the parent element cannot display all the floated child elements, the last one will wrap, but it may be stuck
. 2. Once the element is floated, it will become a block-level element
. Once the inline elements are floated, it is allowed Modify the size
3. Once the element is floated, if the width is specified, the width will be determined by the content.
4. Text, pictures, and inline elements are arranged in a wrapping manner, and will not be pressed by the floating element.