Summary of common CSS properties 2

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

This The value indicates the edge on which floating objects are not allowed.

Default value: none

none: Allow floating objects on both sides

both: No floating objects allowed

left: Floating objects are not allowed on the left

right: Floating objects are not allowed on the right

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

display: Set or retrieve whether and how the object is displayed.

If display is set to none, the float and position attribute definitions will not take effect;

If position is neither static nor relative, the float attribute definition will not take effect;

IE7 and earlier browsers only support none | inline | block | inline-block | list-item attribute values;

Opera12.10 and above already support direct writing of attribute values: flex | inline -flex without adding a prefix;

none: Hide the object. Unlike the hidden value of the visibility attribute, it does not retain its physical space for the hidden object

inline: Specifies that the object is an inline element.

block: Specifies the object as a block element.

list-item: The specified object is a list item.

inline-block: Specifies the object as an inline block element. (CSS2)

table: Specifies the object as a table at the block element level. Similar to html tag (CSS2)

inline-table: Specifies the object as a table at the inline element level. Similar to the html tag

(CSS2)

table-caption: Specify the object as the table title. Similar to the html tag

(CSS2)

table-row-group: Specifies the object as a table row group. Similar to the html tag

(CSS2)

table-column: Specify the object as a table column. Similar to the html tag

(CSS2)

table-column-group: The specified object is displayed as a table column group. Similar to the html tag

(CSS2)

table-header-group: Specify the object as the table header group. Similar to the html tag

(CSS2)

table-footer-group: Specify the object as the table footer group. Similar to the html tag

(CSS2)

compact: Allocate objects as block objects or inline objects based on content (CSS3)

run-in: According to The context determines whether the object is an inline object or a block-level object. (CSS3)

If the run-in element contains a block-level element, the run-in element will become a block-level element;

If there is a block-level element (non-float and position definition) immediately following the run-in element, the run-in element will become the first inline element in the block; a run-in element cannot be inserted into a block that already has a run-in element at the beginning or is itself a run-in element in;

In other cases, the run-in element will be a block-level element;

ruby: Display the object as a table footer group (CSS3)

ruby- base: Display the object as a table footer group (CSS3)

ruby-text: Display the object as a table footer group (CSS3)

ruby-base-group: Display the object as a table footer group Display (CSS3)

ruby-text-group: Display the object as a table footer group (CSS3)

flex: Display the object as a flex box model (CSS3)

inline-flex: Display the object as an inline block-level flexbox model (CSS3)

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

float: The value of this attribute indicates whether and how the object floats.

When this property is not equal to none and causes the object to float, the object will be regarded as a block object (block-level), that is, the display property is equal to block. That is, the display attribute of floating objects will be ignored.

float will not be applied when absolute positioning and display is none.

none: Set the object not to float

left: Set the object to float on the left

right: Set the object to float on the right

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

overflow: Composite attributes. Retrieves or sets how the object's content is managed when it exceeds its specified height and width.

Default value: visible

If only one is provided, its effect is equivalent to overflow-x + overflow-y.

If two are provided, the first is equivalent to overflow-x, and the second is equivalent to overflow-y.

For table, if the table-layout attribute is set to fixed, the td object supports the overflow attribute with a default value of hidden. If set to hidden, scroll or auto, content exceeding the td size will be cut. If set to visible, it will cause extra text to overflow to the cells on the right or left (depending on the direction property setting).

visible: Do not cut the content.

hidden: Crop the content that exceeds the object size, and the scroll bar will not appear.

scroll: Crop the content that exceeds the object size and display the excess content in the form of a scroll bar.

auto: Cut content and add scroll bars when needed. This is the default value for body objects and textarea.

no-display: When the content does not fit into the current content box, the entire box will be removed, similar to display:none. (CSS3)

no-content: When the content does not fit in the current content box, the entire content is hidden, similar to visibility:hidden. (CSS3)

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

overflow-x: Retrieve or set how the content of the object is managed when it exceeds its specified width.

Default value: visible

visible: Do not cut the content.

hidden: Crop the content that exceeds the width of the object, and no scroll bar will appear.

scroll: Crop the content that exceeds the width of the object and display the excess content as a scroll bar.

auto: Cut content and add scroll bars when needed. This is the default value for body objects and textarea.

no-display: When the content does not fit into the current content box, the entire box will be removed, similar to display:none.

no-content: When the content does not fit into the current content box, the entire content is hidden, similar to visibility:hidden.

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

overflow-y: Retrieve or set how to manage content when the object's content exceeds its specified height.

Default value: visible

visible: Do not cut the content.

hidden: Crop the content that exceeds the height of the object, and the scroll bar will not appear.

scroll: Crop the content that exceeds the height of the object and display the excess content in the form of a scroll bar.

auto: Cut content and add scroll bars when needed. This is the default value for body objects and textarea.

no-display: When the content does not fit into the current content box, the entire box will be removed, similar to display:none.

no-content: When the content does not fit into the current content box, the entire content is hidden, similar to visibility:hidden.

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

rotation: Retrieve or set the rotation angle of the object.

Default value: 0

rotation rotation uses the value set by rotation-point as the reference origin for rotation offset.

The border, padding, content, and any background that is not fixed will rotate as the element rotates. All child elements with position values ​​of static and relative will also rotate, while the rest will not.

rotation rotation does not affect parent elements and sibling elements, and their position and layout remain unchanged. So when the element is rotated, it may overlap other elements.

This attribute is similar to the rotation rotate() under the transform attribute and may be replaced or abandoned.

: Specify the angle. Can be negative

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

rotation-point: Retrieve or set the coordinate point referenced when the object is rotated.

rotation rotation uses the value set by rotation-point as the reference origin for rotation offset.

This attribute is similar to transform-origin and may be replaced or abandoned.

: Specify coordinate values ​​in percentage.

: Specify the coordinate value with the length value.

left: Specify the abscissa coordinate of the origin as left

center: Specify the abscissa or ordinate of the origin as center

right: Specify the abscissa coordinate of the origin as right

top: Specify the ordinate of the origin as top

bottom: Specify the ordinate of the origin as bottom

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

visibility: Set or retrieve whether to display the object. Unlike the display attribute, this attribute reserves the physical space occupied by the hidden object

If you want the object to be visible, its parent object must also be visible.

Default value: visible

visible: Set the object to be visible

hidden: Set the object to be hidden

collapse: Mainly used to hide table rows or columns. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden. IE6 and below do not support this parameter value

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

table-cell: Specify the object as a table cell. Similar to the html tag

(CSS2)

(CSS2)

table-row: Specifies the object as a table row. Similar to the html tag

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