css-Layout 1-Basic properties

<! DOCTYPE html>
css4-Layout 1-Basic properties

Property:
Display
Visibility
Float
Clear

HTML element type: Inline element, block-level element

Block-level elements: The biggest difference: line wrapping
Inline element: No change number

<style>
Div{background: #f00; width:200px;height:100px;}
Span{background: #0f0; width:200px;height:100px;}

/*display*/
Div{display:inline;}/* element into inline */
Span{display:block;} /* element to block level */
Div,span{display:inline-block;} /* elements into inline block-level synthesis, IE6/7 does not support block-level element conversions, not commonly used */
Div{display:none;}/* Delete element, no placeholder */

/*visibility*/
Div{visibility:hidden,}/* Hide elements, placeholder, show visible, hide hidden*/

/*float Floating */
H2,h3{float:left;}/* Floating: block-level element horizontal: left,right,none*/
H4{clear:both;}/* Clear float */

</style>
<div> serving the Ddd</div>
<div> serving the Ddd</div>
<span> serving the Sss</span>
<span> serving the Sss</span>

css-Layout 1-Basic properties