visibility and overflow

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