2015-09-22 Fourth class CSS block-level elements in-line element floating box model absolute positioning, considerable positioning and fixed positioning

Common block-level elements and inline elements

First, block-level elements

  <  p  > , <  h1-h6  > , <  ulli  > , <  olli  > , <  div  > , <  tabl  > , <  hr  >  

Two, inline elements (inline elements)

1, the characteristics of the elements of the line: (1), the size of the text area is affected by the width and height is not affected.　　(2), inline elements do not occupy a single line. 2. Common inline elements:  <a>,<pan> ,<  IMG> ,<input>

Third, block-level elements and inline elements are converted to each other

1, Display:inline;　Block-level to the Inner element 2, Display:block;　The inline elements are turned into block-level elements 3, display:inline-block; Features inline and block-level elements: (1) width, height will be affected (2) will not occupy a single line

Float (float)

1, Float:left Right
2. Clear float: clear:both (clear floating on both sides)

Example:

{width:100px;Height:100px;Border:Solid 2px Red;float: Left;}#d3{width:100px;Height:100px;Border:Solid 2px Red;Clear: Left; }#d4{width:100px;Height:100px;Border:Solid 2px Red; }</style>the effect shown is 1: If you want 3 and 4 to be together, you need to add a float:left in #d3 and #d4, so you can float! "Code as follows":{width:100px;Height:100px;Border:Solid 2px Red;float: Left;}#d3{width:100px;Height:100px;Border:Solid 2px Red;Clear: Left;float: Left; }#d4{width:100px;Height:100px;Border:Solid 2px Red;float: Left;}</style>display effects 2:
        If the float:left is removed from the #d4, then it will be ineffective! "Code as follows":{width:100px;Height:100px;Border:Solid 2px Red;float: Left;}#d3{width:100px;Height:100px;Border:Solid 2px Red;Clear: Left;float: Left; }#d4{width:100px;Height:100px;Border:Solid 2px Red;}</style>Show effect 3: in the #d4 if there is no effect then will pass through the clear:left, to clear off, to achieve the effect! (That is, the default effect above is shown in Figure 1) "code as follows":{width:100px;Height:100px;Border:Solid 2px Red;float: Left;}#d3{width:100px;Height:100px;Border:Solid 2px Red;Clear: Left;float: Left; }#d4{width:100px;Height:100px;Border:Solid 2px Red;clear: left; }</style>Display effect:

CSS Box model

Inner pitch: Padding

padding:10px; Up or down

padding:10px20px; Up and down, around

padding:10px 20px 10px; Up, around, down

padding:1px 1px 1px 10px; Top, right, bottom, left

Outer Space: Margin

margin:10px; Up or down

margin:10px20px; Up and down, around

margin:10px 20px 10px; Up, around, down

margin:1px 1px 1px 10px; Top, right, bottom, left

Note: Padding in various cases, the inline element is supported, while the margin on the inline element only supports the left and right, does not support up and down.

Positioning (absolute positioning, relative positioning)

1. Absolute positioning Position:absolute

(1), when set to absolute positioning, out of the document flow, does not occupy a single row and will not be affected by floating (float)

(2), when set to absolute positioning, the orientation of the element is affected by the form's top left-right bottom.

2. Relative positioning positon:relative

(1), when set to relative positioning when not out of the document flow, will be affected by the float (float).

(2), when set to relative positioning, the azimuth (top left right bottom) is relative to the parent tag of the element, because the label is not separated from the document flow so that the label around it is occupied position.

3, fixed positioning positon:fixed

(1), when set to fixed positioning, out of the document flow, will not be affected by the floating will be fixed in the set position.

2015-09-22 Fourth class CSS block-level elements in-line element floating box model absolute positioning, considerable positioning and fixed positioning