CSS Layout Properties

Last Update:2017-10-10 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Document Flow Type : The elements in the document are displayed in an arranged display rule, and the HTML provides the layout of the 3 Chinese document flow type control elements.

Normal flow: Elements in a document display rules by default.
- From top to bottom, from left to right
- Block-level element exclusive row
- Elements cannot overlap (cannot intersect)
Floating flow: A set element arranges elements in a way that tilts and floats in one direction. Positioning
- From top to bottom, jianfengchazhen in the specified direction.
- Elements cannot overlap (cannot intersect)
Positioning: Positions the element directly in the document or in the parent element, as if it floats above the specified element.
- Out of the document flow.
- Elements can overlap within an area and are displayed in an overlay, as shown by a limited number of levels.

Layout Properties : properties that govern how the elements are displayed in the document layout, can be divided into the following three categories according to function.

controlling display class properties
- Display: Sets the displayed type of the element, commonly used as follows.
  - None: Hides the object and does not occupy space.
  - Inline: Specifies that the object is an inline element.
  - Block: Specifies that the object is a block element.
  - Inline-block: Specifies that the object is an inline block element.
- Visibility: Sets whether to display elements, commonly used values are as follows
  - Visible: Set object visual, but occupy space
  - Hidden: Setting Object shadowing
  - ```
  1 <styletype= "Text/css">2 Div{3 Border:2px Black Solid;4 width:300px;5 Height:400px;6         7     }8 #n{9 Display:None;Ten     } One #h{ A Visibility:Visible; -     } - </style> the </Head> - <Body> -     <DivID= "n"></Div> -     <DivID= "H"></Div> + </Body>
```
controlling floating class properties
- Control floating class Properties float: The set element is displayed as a floating stream.
  - None: Set object does not float
  - Left: Sets the object's floating direction
  - Right: Sets the object's floating direction
- Clear: Clear float.
  - None: Do not clear float.
  - Both: Clear both sides of the float.
  - Left: clearly floating on the side.
  - Right: Clear the float on the left.
  - ```
  1 <styletype= "Text/css">2 Div{3 Border:2px Black Solid;4 width:300px;5 Height:400px;6 float: Left;7     }8 #cl{9 Clear: Left;Ten     } One </style> A </Head> - <Body> -     <Div></Div> the     <DivID= "CL"></Div> - </Body>
```
control overflow Class Properties
- Control overflow Class Property overflow (-X) (-y): Sets how the content is displayed when it overflows (Landscape \ Portrait) parent container.
  - Visible: Do not process overflow content, content may exceed the container.
  - 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 scroll bar.
  - Auto: Scroll bars appear when the content overflows the container, and scroll bars appear on demand.
  - ```
  1 <styletype= "Text/css">2 Div{3 Border:2px Black Solid;4 width:300px;5 Height:400px;6 Overflow:Hidden;7     }8 </style>9 </Head>Ten <Body> One     <DivID= "Over"></Div> A </Body>
```

CSS Layout Properties

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS Layout Properties

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support