display@3
Property description: Sets or gets whether and how the object is displayed
Version Change: Yes
Syntax Template:
display: none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column -group | table-footer-group | table-header-group | run-in@3 | flex@3 | inline-flex@3
Default value: Determined by the element object itself
Attribute value description:
none: Hidden object, which is different from the hidden value of the visibility attribute. It does not reserve its physical space for the hidden object; inline: the specified object is an inline element; block: the specified object is a block element; list-item: specifies the object as a list item; inline-block: the specified object is an inline block element; table: specifies the object as a table at the block element level, similar to the html tag <table>; inline-table: specifies the object as a table at the inline element level, similar to the html tag <table>; table-caption: Specify the object as the table title, similar to the html tag <caption>; table-cell: Specify the object as a table cell, similar to the html tag <td>; table-row: specifies the object as a table row, similar to the html tag <tr>; table-row-group: Specify the object as a table row group, similar to the html tag <tbody>; table-column: Specify the object as a table column, similar to the html tag <col>; table-column-group: Specifies the object to be displayed as a table column group, similar to the html tag <colgroup>; table-header-group: Specify the object as the table header group, similar to the html tag <thead>; table-footer-group: Specifies the object as a table footer group, similar to the html tag <tfoot>; /*** New properties added in css3***/ run-in: determine whether the object is an inline object or a block-level object based on the context; Flex: Display the object as a flexible box, referred to as a flexible box; inline-flex: Display the object as an inline block-level elastic box;
Applicable elements:
Is Inheritance: No
Is it animated: No
Script interface: display
Note: If display
is set to none
, the float
and position
attribute definitions will It does not take effect. IE6,7
only supports setting the inline
element to inline-block
, and other types of elements are not allowed.
visibility
Property description: Set or get whether to display the object
Version Change: No
Syntax Template:
visibility: visible | hidden | collapse|none
Default: visibility
Attribute value description:
visible: Set the object to be visible and occupy space; hidden: Set the object to be hidden (invisible), occupying space; collapse: mainly used to hide the rows or cells of the table; none: not drawn, not visible, does not occupy space
**Display:** Indicates whether to draw this element
**Visible:**Whether you want to see it after drawing
Applicable elements: All elements
Inheritance: Yes
Animated: Yes
Scripting interface: visibility
**Important: **both visible and hidden occupy space, but display:none
does not occupy space
Note: Unlike the display
attribute, this attribute reserves the physical space occupied by the hidden object; collapse
is the same as hidden
code> has the same effect, but pay attention to distinguishing semantics
overflow
Property description: Set or get the way the object handles overflow content, composite property
Version Change: No
Grammar template:
overflow:<overflow-style> <overflow-style> = visible | hidden | scroll | auto
Default:
Attribute value description:
visible: do not handle the overflow content, the content may exceed the container; hidden: hide the content of the overflow container and no scroll bar appears; scroll: Hide the content of the overflow container, and the overflow content will be presented by scrolling the scroll bar; auto: The scroll bar does not appear when the content does not overflow the container. The scroll bar appears when the content overflows the container. The scroll bar appears on demand. This is the default value of the body object and textarea;
Applicable elements: block container, flex
container, grid
container
Is it inheritable: No
Animation or not: No
**Script interface: ** overflow
Notes: For table
, if the table-layout
attribute is set to fixed
, then td
objects support an overflow
property with a default value of hidden
. If set to hidden
, scroll
or auto
, then the content exceeding the size of td
will be clipped. If set to visible
, will cause extra text to overflow to the right or left (depending on the direction
property setting) of the cell
overflow-x
Property description: Set or get the way the object handles horizontal overflow content
Version Change: No
Grammar template:
overflow-x:<overflow-style> <overflow-style> = visible | hidden | scroll | auto
Default:
Attribute value description:
visible: do not handle the overflow content, the content may exceed the container; hidden: hide the content of the overflow container and no scroll bar appears; scroll: Hide the content of the overflow container, and the overflow content will be presented by scrolling the scroll bar; auto: The scroll bar does not appear when the content does not overflow the container. The scroll bar appears when the content overflows the container. The scroll bar appears on demand. This is the default value of the body object and textarea;
Applicable elements: block container, flex
container, grid
container
Is it inheritable: No
Animation or not: No
**Script interface: ** overflowX
overflow-y
Property description: Set or get the way the object handles horizontal overflow content
Version Change: No
Grammar template:
overflow-y:<overflow-style> <overflow-style> = visible | hidden | scroll | auto
Default:
Attribute value description:
visible: do not handle the overflow content, the content may exceed the container; hidden: hide the content of the overflow container and no scroll bar appears; scroll: Hide the content of the overflow container, and the overflow content will be presented by scrolling the scroll bar; auto: The scroll bar does not appear when the content does not overflow the container. The scroll bar appears when the content overflows the container. The scroll bar appears on demand. This is the default value of the body object and textarea;
Applicable elements: block container, flex
container, grid
container
Is it inheritable: No
Animation or not: No
**Script interface: ** overflowY