Set placement with CSS

Source: Internet
Author: User
Set placement with CSS
 
 

1. Float)

Configurable value: left (the element is left, and the text is right); right (the element is right, and the text is left); none (displayed by default)
Example: div {float: right} or <Div style = "float: Right">

2. Clear: sets the clearing property (sets whether to allow the existence of floating elements)

Value: Both (if there is a floating element on both sides, the element is moved below the floating element); left (if there is a floating element on the left, the element is moved below the floating element ); right (if there is a floating element on the right side, the element is moved below the floating element); none (displayed as a preset)
Example: div {clear: right} or <Div style = "clear: Right">

3. Width: Set the width.

Configurable value: auto (automatically changed in a fixed proportion)

Parameter value:

<Length> length unit
<Percentage> Percentage, based on the width of the parent Element

Example: div {width: 300pt} or <Div style = "width: 300pt">

4. Height: Set the height.

Configurable value: auto (automatically changed in a fixed proportion)

Parameter value:

<Length> length unit
<Percentage> Percentage, based on the width of the parent Element

Example: div {Height: 300pt} or <Div style = "height: 300pt">

5. Position: Set the position

Configurable value: absolute (based on the parent element and placed in a specific position); relative (based on Adjacent Elements, placed in a specific position); static (default position, depends on the position of the element in the original code)
Example: div {position: static} or <Div style = "position: static">

6. Top: Set the top position

Configurable value: auto (automatically changed in a fixed proportion)

Parameter value:

<Length> length unit
<Percentage> Percentage, based on the width of the parent Element

Example: div {top: 30pt} or <Div style = "Top: 30pt">

7. Left: Set the left end position.

Configurable value: auto (automatically changed in a fixed proportion)

Parameter value:

<Length> length unit
<Percentage> Percentage, based on the width of the parent Element

Example: div {left: 30pt} or <Div style = "Left: 30pt">

8. clip: Set the cropping (set the shape and size of a region, and the area is transparent)

Parameters:

Rect (top, right, bottom, left) sets the upper right and lower left length of the rectangle and automatically compares the length of the opposite side.

Example: div {clip: rect (0, 100px, 50px, 0)} or <Div style = "clip: rect (0, 100px, 50px, 0)">

9. overflow: Set the overflow processing (control the display mode when the element content exceeds the size of the element)

Configurable value: visible (the element will not be displayed according to the set size, but all content can be seen); Hidden (the Part beyond the set size of the element will be hidden and not displayed ); scroll (if necessary, scroll to show all the content to the user); Auto (displayed as preset)

Example: div {overflow: Scroll} or <Div style = "overflow: scroll">

10. Visibility: sets the visibility.

Configurable value: visible (set to display this element); Hidden (set to not display this element, but still occupy space); inherit (determined by the visibility of the parent element)

Example: div {visibility: hidden} or <Div style = "visibility: hidden">

11. Z-index: Set the Z axis parameter (three-degree space)

Configurable value: auto (when the element position is repeated, the elements written in the original code on the back will appear above the elements written in the front)

Parameters:

<Number> decimal place. The element with a large value appears above the element with a small value.

Example: div {z-index: 3} or <Div style = "Z-index: 3">

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.