In-depth understanding of CSS (display,float,position)

Display is used to set how elements are displayed

Display:block | none | inline | Inline-block

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

None: Hide Objects

float controls whether the element is floating display

Float:none | Left | Right

None: Set object does not float

Left: Sets the object to float

Right: Set object to float

Purpose of Floating:

is to break the default display rule for document flow. If you want the element to be displayed according to our layout requirements. You should use the Float property

1. Any element declared as float is automatically set to a "block-level element"

2. Floating elements in the standard browser are out of the flow of the document, so elements after the floating element occupy the position where the floating elements should have been

3. If there is not enough space in the horizontal direction to accommodate the floating element, move to the next line

4. Text content around floating elements

5. Floating elements can only float to the left or right

Clear clears floating

Clear:none | Left | Right | Both

None: Default value. Allowed to have floating objects on both sides

Left: does not allow floating objects

Right: Do not allow floating objects

Both: Floating objects are not allowed

How position objects are positioned

position:static | Absolute | Fixed | Relative

Static: The default value. No positioning, the object follows the regular flow. At this point 4 positioning offset properties are not applied

Relative: Relative positioning, the object follows a regular flow, and the reference to its position in the regular stream is offset by the 4 positioning offset properties of top,right,bottom,left without affecting any elements in the regular flow

Absolute: Absolute positioning, the object is detached from the regular stream, at which point the Offset property refers to the nearest positioned ancestor element, and if there is no ancestor element positioned, it goes back to the BODY element. The offset position of the box does not affect any element in the regular flow, and its margin does not collapse with any other margin

Fixed: fix positioning, consistent with absolute, but offset positioning is a window for reference. When a scroll bar appears, the object does not scroll with the

Absolute Description:

1. Out of document Flow

2. Positioning via Top,bottom,left,right

3. If the parent element position is static, it will be positioned with the body coordinate origin.

4. If the parent element is position as relative, the parent element will be positioned

Example: p {position:absolute; left:100px; top:100px;}

Relative Description:

1. Relative positioning (relative to its original position)

2. Do not detach from the document flow

3. Refer to its own static position via top,bottom,left,right positioning

Example: p {position:relative; left:100px; top:100px;}

Fixed Description:

Fixed positioning is really just a special form of absolute positioning, fixed positioned elements are fixed relative to the browser window, not relative to its containing elements, even if the page scrolling, they will still be in the browser window in the same place as the original

Example: p {position:fixed; right:0; bottom:0;}

Stacking Order of Z-index objects

Z-index:auto | Number

When elements overlap, the order in which they cascade can be set through the Z-index property

Objects with a larger number value are overwritten by objects with smaller number values

This CSS (display,float,position) in-depth understanding is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.