CSS Layout Properties (display,float,clear,visibility,overflow,overflow-x,overflow-y)

Source: Internet
Author: User

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 | Box | Inline-box | Flexbox | Inline-flexbox | Flex | Inline-flex

default value : inline

applies to : all elements

Inheritance : None

Animation : No

Computed value : Specifies the value, except for floating, absolute positioning, and root element

Value:
None
hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden
Inline
Specifies that the object is an inline element.
Block
Specifies that the object is a block element.
List-item:
Specifies that the object is a list item.
Inline-block:
Specifies that the object is an inline block element. (CSS2)
Table
specifies the object as a table at the block element level. Similar to HTML tags <table> (CSS2)
Inline-table:
specifies the object as an inline element-level table. Similar to HTML tags <table> (CSS2)
Table-caption:
specifies the object as the table caption. Similar to HTML tags <caption> (CSS2)
Table-cell:
specifies the object as a table cell. Similar to HTML tags <td> (CSS2)
Table-row:
specifies the object as a table row. Similar to HTML tags <tr> (CSS2)
Table-row-group:
specifies the object as a table row group. Similar to HTML tags <tbody> (CSS2)
Table-column:
specifies the object as a table column. Similar to HTML tags <col> (CSS2)
Table-column-group:
Specifies that the object is displayed as a table column group. Similar to HTML tags <colgroup> (CSS2)
Table-header-group:
specifies the object as a table header group. Similar to HTML tags <thead> (CSS2)
Table-footer-group:
specifies the object as the table footer group. Similar to HTML tags <tfoot> (CSS2)
Run-in:
determines whether an object is an inline object or a block-level object, depending on the context. (CSS3)
Box
displays the object as an elastic telescopic box. (the oldest version of the Telescopic box) (CSS3)
Inline-box:
the object is displayed as an inline block-level elastic expansion box. (the oldest version of the Telescopic box) (CSS3)
Flexbox
displays the object as an elastic telescopic box. (Telescopic box transition version) (CSS3)
Inline-flexbox:
the object is displayed as an inline block-level elastic expansion box. (Telescopic box transition version) (CSS3)
Flex:
displays the object as an elastic telescopic box. (Latest version of Telescopic box) (CSS3)
Inline-flex:
the object is displayed as an inline block-level elastic expansion box. (Latest version of Telescopic box) (CSS3)

float: none | Left | Right

default value : None

applies to : all elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:
None
Set object does not float
Left
Set object floats to the left
Right
Set object floats to the right
Description The value of this property indicates whether and how the object floats. See the Clear property
    • If float is not none, when display:inline-table, display calculates the value of table; when Display:inline | Inline-block | Run-in | When the table-* is in the system, display calculates the block, and the other case is the specified value;
    • Float does not take effect when absolute positioning and display are none.
    • The corresponding script attribute is stylefloat(IE) or cssfloat(non IE). (Note that this is stylefloat or cssfloat, not float)

clear: none | Left | Right | Both

default value : None

applies to : block-level elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:
None
Allowed to have floating objects on both sides
Both
Floating objects are not allowed
Left
Floating objects on the left are not allowed
Right
floating objects on the right are not allowed
Description The value of this property indicates that the edge of a floating object is not allowed. See Float property
    • The corresponding script attribute is clear.

visibility: Visible | Hidden | Collapse

Default value : Visible

applies to : all elements

inheritance : There are

Animation : Yes

Calculated value : Specify a value

Value:
Visible
Set Object Visual
Hidden
Set Object hiding
Collapse
a row or column that is used primarily to hide a table. Hidden rows or columns can be used by other content. For other objects outside the table, the action is equivalent to hidden.
Description Sets or retrieves whether the object is displayed. Unlike the display property, this property retains the physical space it occupies for hidden objects
    • If you want the object to be visual, its parent object must also be visible.
    • The corresponding script attribute is visibility.

overflow:<overflow-style>

<overflow-style> = Visible | Hidden | Scroll | Auto | Paged-x | paged-y | Paged-x-controls | Paged-y-controls | Fragments

Default value : Visible

suitable for: block container, Telescopic box container, Grid container

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:
Visible
The content may be out of the container if the overflow content is not processed.
Hidden
Hides the contents of the overflow container and does not appear with scroll bars.
Scroll
Hides the contents of the overflow container, and the overflow content is rendered as a scrolling scroll bar.
Auto
When the content does not overflow the container without a scrollbar, scroll bars appear when the content overflows the container, and scroll bars appear on demand. This is the default value for the body object and textarea.
Paged-x:
Todo... (CSS3)
Paged-y:
Todo... (CSS3)
Paged-x-controls:
Todo... (CSS3)
Paged-y-controls:
Todo... (CSS3)
Fragments:
TODO ... (CSS3)

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Description Composite properties. Retrieves or sets how the object handles overflow content. See Overflow-x, Overflow-y Properties
    • The overflow effect is equivalent to Overflow-x + overflow-y.
    • For table, if the Table-layout property is set to fixed, the TD object supports a overflow property with a default value of hidden. If set to Hidden,scroll or auto, then the content beyond the TD size will be clipped. If set to visible, causes additional text to overflow to the right or left (depending on the direction property setting) of the cell.
    • The corresponding script attribute is overflow.

overflow-x:<overflow-style>

<overflow-style> = Visible | Hidden | Scroll | Auto | Paged-x | paged-y | Paged-x-controls | Paged-y-controls | Fragments

Default value : Visible

suitable for: block container, Telescopic box container, Grid container

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:
Visible
The content may be out of the container if the overflow content is not processed.
Hidden
Hides the contents of the overflow container and does not appear with scroll bars.
Scroll
Hides the contents of the overflow container, and the overflow content is rendered as a scrolling scroll bar.
Auto
When the content does not overflow the container without a scrollbar, scroll bars appear when the content overflows the container, and scroll bars appear on demand. This is the default value for the body object and textarea.
Paged-x:
Todo... (CSS3)
Paged-y:
Todo... (CSS3)
Paged-x-controls:
Todo... (CSS3)
Paged-y-controls:
Todo... (CSS3)
Fragments:
TODO ... (CSS3)

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Description retrieves or sets how the object handles horizontal overflow content. See Overflow, overflow-y properties
    • The corresponding script attribute is overflowx.

overflow-y:<overflow-style>

<overflow-style> = Visible | Hidden | Scroll | Auto | Paged-x | paged-y | Paged-x-controls | Paged-y-controls | Fragments

Default value : Visible

suitable for: block container, Telescopic box container, Grid container

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:
Visible
The content may be out of the container if the overflow content is not processed.
Hidden
Hides the contents of the overflow container and does not appear with scroll bars.
Scroll
Hides the contents of the overflow container, and the overflow content is rendered as a scrolling scroll bar.
Auto
When the content does not overflow the container without a scrollbar, scroll bars appear when the content overflows the container, and scroll bars appear on demand. This is the default value for the body object and textarea.
Paged-x:
Todo... (CSS3)
Paged-y:
Todo... (CSS3)
Paged-x-controls:
Todo... (CSS3)
Paged-y-controls:
Todo... (CSS3)
Fragments:
TODO ... (CSS3)

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Description retrieves or sets how the object handles vertical overflow content. See Overflow, Overflow-x properties
    • The corresponding script attribute is overflowy.

CSS Layout Properties (display,float,clear,visibility,overflow,overflow-x,overflow-y)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.