CSS 笔记四（Display/Visibility/Position/Float）

CSS Layout

Examples of block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Examples of inline elements:

• <span>
• <a>
• <img>

CSS display

• The display property specifies the type of box used for an HTML element.

display: value;

Property Values

• inline　　Default value. Displays an element as an inline element (like <span>)
• block　　Displays an element as a block element (like <p>)
• inline-block　　Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
• inline-table　　The element is displayed as an inline-level table
• list-item　　Let the element behave like a <li> element　　
• none　　The element will not be displayed at all (has no effect on layout)

CSS visibility

• The visibility property specifies whether or not an element is visible.

visibility: visible|hidden|collapse|initial|inherit;

Property Values

• visible　　Default value. The element is visible
• hidden　　The element is invisible (but still takes up space)
• collapse　　Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.

The position Property

The position property specifies the type of positioning method used for an element.

• static（default）
• relative
• fixed
• absolute

Notice

1. Elements are then positioned using the top, bottom, left, and right properties.
2. However, these properties will not work unless the position property is set first.

CSS中position属性( absolute | relative | static | fixed )详解

Float and clear

• The float property specifies whether or not a box (an element) should float.
• The clear property specifies on which sides of an element floating elements are not allowed to float.

Note: Absolutely positioned elements ignores the float property!

float: none|left|right|initial|inherit

clear: none|left|right|both|initial|inherit;