Summary of common CSS properties

******* Common CSS properties *********

z-index:

auto (default value)

Retrieves or sets the stacking order of objects.

Parallel objects, the larger the value of this attribute parameter, the higher they will be stacked on top.

If this attribute of two objects has the same value, they will be cascaded according to the order in which they flow in the HTML document, and the one written later will overwrite the previous one.

The position attribute value must be defined as relative | absolute | fixed | center | page for this value to take effect.

The corresponding script feature is zIndex.

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

clip: Retrieve or set the visible area of ​​the object. The parts outside the area are transparent.

The value of position must be set to absolute before this attribute can be used.

auto: No clipping of the object

rect(|auto |auto |auto |auto): Based on top-right-bottom-left The order provides four offset values ​​calculated from the upper left corner of the object for the (0,0) coordinate. Any of these values ​​​​can be replaced with auto, that is, this edge will not be clipped.

Crop in the upper-left orientation: start cropping from 0 until the set value, that is, the auto value in the upper-left orientation is equal to 0;

Crop in the right-lower orientation: start from the setting The value starts to be clipped until the rightmost and bottom edges, that is, the auto value in the right-lower position is the actual width and height of the box;

Example: clip:rect(auto 50px 20px auto)

Note: The upper side will not be cut, the right side will be cut from the 50th pixel to the far right, the lower side will be cut from the 20th pixel to the bottom, and the left side will not be cut

inset(|auto |auto |auto |auto): This clipping method is similar to rect(). The difference is the clipping of inset(). Each orientation is clipped with reference to the boundary of the orientation.

Crop in the top-right-bottom-left direction: start cropping from 0 until the set value, that is, the auto value of the top-right-bottom-left direction is equal to 0; (CSS3)

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

position: Retrieve the positioning method of the object.

static: The object follows the regular flow. Properties such as top, right, bottom, and left will not be applied.

relative: The object follows the normal flow, and does not affect any elements in the normal flow when it is offset through the top, right, bottom, and left attributes according to its position in the normal flow. Cascades are defined via the z-index attribute.

absolute: The object breaks away from the regular flow and uses top, right, bottom, left and other attributes for absolute positioning. The offset position of the box does not affect any element in the regular flow, and its margin does not collapse with any other margin. Its cascade is defined through the z-index attribute.

fixed: The object breaks away from the regular flow. Use top, right, bottom, left and other attributes to position the window as a reference point. When the scroll bar appears, the object will not scroll. IE6 and below do not support this parameter value

center: The object is separated from the regular flow, and attributes such as top, right, bottom, and left are used to specify the position or size of the box. The box is centered vertically and horizontally within its containing container. The offset position of the box does not affect any elements in the regular flow, its margins are not collapsed with any other margins, and their cascading is defined by the z-index attribute. (CSS3)

page: The position of the box is calculated based on absolute. (CSS3)

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

margin

h2{margin:10px 0;}

Retrieve or set the extended margins on the four sides of the object.

If all four parameter values ​​are provided, the four sides will be applied in the order of upper, right, lower, and left.

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

If two are provided, the first one is for up and down, and the second one is for left and right.

If three are provided, the first one is for top, the second one is for left and right, and the third one is for bottom.

Inline objects can use this attribute to set the outer patches on the left and right sides; if you want to set the outer patches on the upper and lower sides, you must first make the object appear as block level or inline block level.

Extended margins are always transparent.

Some adjacent margins will merge, which we call margin folding

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

aspect-ratio

: Specify the ratio

Define the ratio of the width and height of the visible area of ​​the page in the output device .

This feature accepts min and max prefixes, so two media features, min-aspect-ratio and max-aspect-ratio, can be derived.

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

@import url(example.css) screen and (max-aspect-ratio:20/11);

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

background:

[background-color]: Specify the background color of the object.

[background-image]: Specifies the background image of the object. It can be a real image path or a "background image" created using gradients

[background-repeat]: Specifies how the background image of the object is laid out and filled.

[ background-attachment ]: Specifies whether the background image of the object scrolls with the object content or is fixed.

[background-position]: Specify the background image position of the object.

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

[background-clip]: Specifies the area where the background image of the specified object is clipped outward.

[background-size]: Specify the size of the background image of the object.

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

background-attachment Settings or Retrieve whether the background image scrolls with the object content or is fixed. The background-image attribute must be specified first.

fixed: The background image is fixed relative to the form.

scroll: The background image is fixed relative to the element, which means that the background image will not scroll when the element content scrolls, because the background image always follows the element itself. But it will scroll with the element's ancestor element or form.

local: The background image is fixed relative to the element content, which means that when the element scrolls with the element, the background image will also scroll because the background image always follows the content. (CSS3)

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

background-clip Specifies the area where the background image of the object is clipped outward.

padding-box: Crop the background outward from the padding area (excluding padding).

border-box: Crop the background outward from the border area (excluding border).

content-box: Crop the background starting from the content area outwards.

text: Use the shape of the foreground content (such as text) as the cropping area to crop outward, so that you can achieve a masking effect such as using the background as a fill color.

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

background-repeat: How about setting or retrieving the background image of an object Lay out the filling. The background-image attribute must be specified first.

Allows 2 parameters to be provided. If all 2 parameters are provided, the first one is used for landscape orientation and the second one is used for portrait orientation.

If only 1 parameter is provided, it is used for landscape and portrait. Except for the special values ​​repeat-x and repeat-y, because repeat-x is equivalent to repeat no-repeat, repeat-y is equivalent to no-repeat repeat, that is, repeat-x and repeat-y are equivalent to providing two parameter values.

The corresponding script feature is backgroundRepeat.

repeat-x: The background image is tiled horizontally

repeat-y: The background image is tiled vertically

repeat: The background image Tile horizontally and vertically

no-repeat: The background image is not tiled

round: The background image automatically scales 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 a certain direction. (CSS3

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

background -position: Set or retrieve the background image position of the object. The background-image attribute must be specified first.

If four are provided, each must be preceded by a keyword ( That is, left | center | right | top | bottom), the offset is offset relative to the keyword position

Example: Suppose you want to define the background image to be at the bottom right of the container, and the distance. There are 20px on the right and bottom respectively

Abbreviation: background:url(test1.jpg) no-repeat right 20px bottom 20px;

： Specify the position of the background image fill with a negative value.

: Use the length value to specify the position of the background image fill with a negative value.

center: The background image is centered horizontally and vertically. .

left: The background image is filled from the left in the horizontal direction.

right: The background image is filled from the right in the horizontal direction.

top: The background image is filled in the vertical direction. Padding starts at the top.

bottom: The background image is padded from the bottom vertically.

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

background-origin: Set or retrieve the reference origin (position) when calculating the background-position of the object's background image

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

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

content-box: Display the background image starting from the content area.

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

The above is the summary of common CSS properties. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!