CSS Common Properties Summary One

CSS Common Properties *********

Z-index:

Auto (default value)

Retrieves or sets the stacking order of objects.

The object of the class, the larger the value of this property parameter, is stacked on top.

If this property of two objects has the same value, it will cascade in the order in which they are streamed in the HTML document, which will overwrite the previous one.

The Position property value must be defined to be relative | Absolute | Fixed | Center | page, this value can be taken into effect.

The corresponding script attribute is zindex.

--------------------------------------------------------------------------------------------------

Clip: Retrieves or sets the viewable area of an object. The parts outside the area are transparent.

The value of position must be set to absolute, which is used by this property.

Auto: Object without clipping

Rect (|auto |auto |auto |auto): Provides four offset values from upper-right-bottom-left to the upper-left corner of the object (0,0) coordinates, where any of the values can be replaced with auto, that is, this edge is not clipped.

Top-left orientation clipping: starting from 0 to trim until set value, i.e. the auto value of the upper-left azimuth is equal to 0;

Right-down orientation clipping: from the set value to the right and bottom, the auto value of the right-bottom orientation is the actual width and height of the box;

Example: Clip:rect (auto 50px 20px Auto)

Note: The top is not cut, the right is cut from the 50th pixel to the right, the bottom is cut from the 20th pixel to the bottom, the left is not cut

Inset (|auto |auto |auto |auto): This clipping is similar to rect (), unlike the clipping of the inset (), where each orientation is clipped with reference to the boundary of the bearing.

Top-right-bottom-left-hand cropping: trim from 0 to set value, i.e. upper-right-bottom-left azimuth auto value equals 0; (CSS3)

-----------------------------------------------------------------------------------------------------------

Position: Retrieves how objects are positioned.

Static: The object follows the regular flow. Attributes such as top,right,bottom,left are not applied.

Relative: The object follows a regular flow and does not affect any elements in the regular flow based on its position in the normal stream through the Top,right,bottom,left property. Cascading is defined by the Z-index property.

Absolute: objects are detached from the regular stream, using attributes such as top,right,bottom,left for absolute positioning, and the box's offset position does not affect any element in the regular flow, its margin is not collapsed with any other margin, and its cascade is defined by the Z-index property.

Fixed: The object is detached from the regular stream, using attributes such as top,right,bottom,left to position the window as a reference point, and the object does not scroll when a scrollbar appears. IE6 and below do not support this parameter value

Center: object is out of regular flow and uses attributes such as Top,right,bottom,left to specify the position or size of the box. The box is centered vertically horizontally in its containing container. The offset position of the box does not affect any element in the regular flow, its margin is not collapsed with any other margin, and its cascade is defined by the Z-index property. (CSS3)

Page: The position of the box is calculated as reference absolute. (CSS3)

--------------------------------------------------------------------------------------------------------------- ---

Margin

h2{margin:10px 0;}

Retrieves or sets the epitaxial margins of the four edges of an object.

If you provide all four parameter values, the top, right, bottom, and left orders are used for four edges.

If only one is provided, it will be used for all four sides.

If two is provided, the first one is for top, bottom, and second for left and right.

If three is supplied, the first one is used on, the second one is for left, right, and the third is for the next.

Inline objects can use this property to set the outer patches on the left and right sides; To set up an outer patch on the upper and lower sides, you must first make the object appear as a block-level or inline block-level.

The extended margins are always transparent.

Some adjacent margin will merge, which we call margin folding

---------------------------------------------------------------------------------------------------------

Aspect-ratio

: Specify ratio

Defines the ratio of the width of the page visible area to the height in the output device.

This attribute accepts the min and Max prefixes, so you can derive the Min-aspect-ratio and max-aspect-ratio two media attributes.

@media screen and (aspect-ratio:1680/957) {...}

@import URL (example.css) screen and (MAX-ASPECT-RATIO:20/11);

---------------------------------------------------------------------

Background

[Background-color]: Specifies the background color of the object.

[Background-image]: Specifies the background image of the object. Can be a real picture path or a "background image" created with a gradient

[Background-repeat]: Specifies how the background image of an object is layout populated.

[Background-attachment]: Specifies whether the background image of the object is scrolled or fixed with the contents of the object.

[Background-position]: Specifies the background image position of the object.

[Background-origin]: Specifies the origin of the object's background image display.

[Background-clip]: Specifies the area where the object's background image is cropped outward.

[Background-size]: Specifies the size of the object's background image.

--------------------------------------------------------------------

Background-attachment Sets or retrieves whether the background image is scrolled or fixed with the content of the object. You must first specify the Background-image property.

Fixed: The background image is pinned relative to the form.

Scroll: The background image is fixed relative to the element, that is, the background image does not scroll when the element content scrolls, because the background image always follows the element itself. However, it scrolls along with the element's ancestor element or form.

Local: The background image is fixed relative to the element content, which means that the background image scrolls as the element scrolls along with the element, because the background image always follows the content. (CSS3)

--------------------------------------------------------------------------------------------------------------- --------------

Background-clip the area that the background image of the specified object is cropped outward.

Padding-box: The background is cropped from the padding area (excluding padding).

Border-box: The background is cropped from the border area (excluding border).

Content-box: Start cropping the background from the content area.

Text: The shape of the foreground content, such as text, is cropped out as the clipping area, so that you can use the background as a matte effect such as a fill color.

---------------------------------------------------------------------------------------------------------------

Background-repeat: Sets or retrieves how the background image of an object is layout filled. You must first specify the Background-image property.

2 parameters are allowed, if all 2 parameters are provided, the 1th is for landscape and the second is for portrait.

If only 1 parameters are supplied, it is used for both landscape and portrait. Special values are repeat-x and repeat-y, except that repeat-x equals repeat no-repeat,repeat-y equivalent to no-repeat Repeat, that is, repeat-x and repeat-y are equivalent to providing 2 parameter values

The corresponding script attribute is backgroundrepeat.

Repeat-x: Background image is tiled horizontally

Repeat-y: Background image is tiled vertically

Repeat: Background image is tiled horizontally and vertically

No-repeat: Uneven background image

Round: The background image is automatically scaled until it fits and fills the entire container. (CSS3)

Space: The background image is tiled with the same spacing and fills the entire container or direction. (CSS3

-------------------------------------------------------------------------

Background-position: Sets or retrieves the background image position of the object. You must first specify the Background-image property.

If you supply four, you must follow a keyword (that is, left |) before each or offset. Center | Right | Top | bottom), offset relative to the keyword position.

Example: Suppose you want to define a background image in the lower right of the container, and 20px from the right and bottom

Abbreviated mode: Background:url (test1.jpg) no-repeat right 20px bottom 20px;

: Specifies the position of the background image fill with a percentage. Can be a negative value.

: Specifies the position of the background image fill with a length value. Can be a negative value.

Center: The background image is centered horizontally and vertically.

Left: The background image is filled in the landscape, starting from the top.

Right: The background image fills in the landscape and starts from the left.

Top: The background image is filled vertically, starting at the top.

Bottom: The background image is filled vertically, starting at the bottom.

------------------------------------------------------------

Background-origin: Sets or retrieves the reference origin (position) of the object's background image when the background-position is computed.

Padding-box: Displays the background image starting from the padding area (including padding).

Border-box: Displays the background image starting from the border area (including border).

Content-box: Displays the background image starting from the content area.

-----------------------------------------------------------

The above is the CSS Common Properties summary of the content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

