CSS using notes

Position:static,relative,absolute,fixed.

Static: Statically positioned. If you do not set the Position property, then the default is static. Properties such as Top,left,bottom,right are not valid in the case of static, and you must set position to one of the other three values to use these properties.

Relative: relative positioning. The element will be adjusted at the position of static positioning, and the space allocated to the element in static positioning will still be allocated to it, and the elements on either side of it will not close to it to fill that space, but they will not be squeezed away from the element's new position.

Absolute: Absolute positioning. The element will be adjusted to the position of the element containing it, for example, if it is nested within another absolutely positioned element, then it is positioned relative to that element.

Fixed: stationary positioning. The element will be set in a fixed position on the browser and will not scroll with other elements. The image point says that when the scroll bar is pulled up and down, the fixed element's position on the screen does not change. It is important to note that IE6 does not support this property.

Overflow:

property specifies what happens when the content overflows the element box.

This property defines how the content of the overflow element's content area will be handled. If the value is scroll, the user agent provides a scrolling mechanism, whether or not it is required. Therefore, it is possible that scroll bars appear even if all the contents of the element box can be dropped.  

value	Description
Visible	The default value. The content is not trimmed and is rendered outside the element box.
Hidden	The content is trimmed and the rest is not visible.
Scroll	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto	If the content is trimmed, the browser displays scroll bars to see the rest of the content.
Inherit	Specifies that the value of the overflow property should be inherited from the parent element.

Float:

The Fload property has four values available: left and right float elements in their respective directions, None (the default) causes the element to not float, and Inherit will get the float value from the parent element.

Transition:　

The Transition property is a shorthand property for setting four transition properties:

• Transition-property: property specifies the name of the CSS property that applies the transition effect. (The transition effect will begin when the specified CSS property changes.)

value	Description
None	No properties get a transition effect.
All	All properties will have a transition effect.
Property	Defines a list of CSS property names to which the transition effect is applied, separated by commas.

• Transition-duration: property specifies the amount of time (in seconds or milliseconds) that the transition will take to complete.
• Transition-timing-function: property specifies the velocity curve of the transition effect.

value	Description
Linear	Specifies the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end.
Ease	A transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that specifies a slow start and then a slow end.
Ease-in	Specifies a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1)).
Ease-out	Specifies a transition effect that ends at a slow speed (equals Cubic-bezier (0,0,0.58,1)).
Ease-in-out	Specifies a transition effect (equal to Cubic-bezier (0.42,0,0.58,1)) that starts and ends at a slow speed.
Cubic-bezier (n,n,n,n)	Define your own values in the Cubic-bezier function. The possible values are numbers between 0 and 1.

• Transition-delay: property specifies when the transition effect begins. The value is measured in seconds or milliseconds.

Transform:

The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements.

value	Description	Test
None	The definition does not convert.	Test
Matrix (n,n,n,n,n,n)	Defines a 2D conversion, using a matrix of six values.	Test
Matrix3D (n,n,N,n,n,n,n, N ,n,n,N,n,n,N,n,n)	Defines a 3D conversion, using a 4x4 matrix of 16 values.
Translate (x,y)	Defines a 2D transformation.	Test
Translate3d (x,y,z)	Defines a 3D transformation.
TranslateX (x)	Define the conversion, just with the value of the X-axis.	Test
Translatey (y)	Define the conversion, just use the Y-axis value.	Test
Translatez (z)	Defines a 3D conversion, just using the Z-axis value.
Scale (x,y)	Defines a 2D scaling transformation.	Test
Scale3d (x,y,z)	Defines a 3D scaling transformation.
ScaleX (x)	Define the zoom transformation by setting the value of the X-axis.	Test
ScaleY (y)	Define the zoom transformation by setting the value of the Y-axis.	Test
Scalez (z)	Define a 3D scaling transformation by setting the value of the Z-axis.
Rotate (angle)	Defines the 2D rotation, which specifies the angle in the parameter.	Test
Rotate3d (x,y,z,angle)	Defines the 3D rotation.
Rotatex (angle)	Defines the 3D rotation along the X-axis.	Test
Rotatey (angle)	Defines a 3D rotation along the Y-axis.	Test
Rotatez (angle)	Defines a 3D rotation along the Z-axis.	Test
Skew (x-angle,y-angle)	Defines a 2D tilt transition along the X and Y axes.	Test
SKEWX (angle)	Defines a 2D tilt transition along the X-axis.	Test
Skewy (angle)	Defines a 2D tilt transition along the Y-axis.	Test
Perspective (n)	Defines a Perspective view for 3D transformation elements.

CSS using notes