On CSS (block-level elements, row-level elements, box models)

First, the characteristics of block-level elements

1, the default display in the upper left corner of the parent tag

2. Full line (full document flow) by default the document flow is a document flow by dividing the form from top to bottom, and emitting elements from left to right in each row.

Two, the characteristics of the element in the line (inline element)

1, the size is affected by the text area, not affected by width, height.

2. The inline elements do not occupy a single line alone.

Cases:

 1  <  div  id  = "D1"  >  2   This is a block-level element  3   Div  >  4  <  span  id  = "D2"  >  5   this is an inline element  6   span  >  

1 <style type= "Text/css" >2 #d1{3 width:100px;4 Height:100px;5 background:#FF9966;6 Border:1px solid Red;7}8 #d2{9 width:100px;Ten Height:100px; One background:#FFFF33; A Border:1px solid #0000CC; -} - </style>

III. common block-level elements and inline elements

1, block-level elements (div, table, ul Li, Ol li, HR, H1~H6, p)

2. Inline elements (A, IMG, span, input)

Four, block-level elements and in-line elements of mutual transfer

1, block-level = = "in line: Display:inline;

2, in line = = "block level: Display:block;

3, the block has the characteristics of elements and block-level elements: Display:inline-block; (width, height is affected.) Does not occupy a single line)

Example: Block level-in-line display:inline;

 1  <  div  id  = "D1"  >  2   this is block-level element 1  3   Div  >  4  <  div  id  = "D2"  >  5   this is block-level element 2  6   Div  >  

To add a pre-effect:

1 <style type= "Text/css" >2 #d1{3 width:100px;4 Height:100px;5 background:#FF9966;6 Border:1px solid Red;7}8 #d2{9 width:100px;Ten Height:100px; One background:#FFFF33; A Border:1px solid #0000CC; -} - </style>

Add Display:inline, Post effect

1 <style type= "Text/css" >2 #d1{3 width:100px;4 Height:100px;5 background:#FF9966;6 Border:1px solid Red;7 Display:inline;8}9 #d2{Ten width:100px; One Height:100px; A background:#FFFF33; - Border:1px solid #0000CC; - Display:inline; the} - </style>

Example: In-line-block-level display:inline; (usually a label is used more often)

1 <DivID= "D1"> <aHerf="#">Normal inline elements</a> </Div>2 <HRAlign= "Left"width= "250px"/>3 <DivID= "D2"> <aHerf="#">Inline elements become block-level elements</a> </Div>

1 <style type= "Text/css" >2 #d1{3 width:250px;4 Height:30px;5 Line-height:30px;6 text-align:Center;7 Border:1px solid Red;8}9 HR{Ten Border:1px dashed #990000; One} A #d2 a{ - text-decoration:None; - Color:#000000; the Display:Block; - width:250px; - Height:30px; - Line-height:30px; + background:#CC6699; - padding:2px; + text-align:Center; A} at #d2 a:hover{ - text-decoration:None; - Color:#FFFFFF; - Display:Block; - width:250px; - Height:30px; in Line-height:30px; - background:#0033FF; to padding:2px; + cursor:Pointer; - text-align:Center; the} * </style>

Five, Box model

CSS Box mode: content, padding (padding), Border (border), border (margin).

The box model is a very important layout in HTML Web page making. Now the popular web-making is using box model layout.

Padding (inner spacing)

1, padding:10px; Indicates that the upper and lower left and right inner spacing are 10px;

2, padding:10px 20px; The upper and lower 10px about 20px;

3, padding:10px 15px 20px; 10px approx. 15px under 20px;

4, padding:5px 10px 15px 20px; Represents 5px right 10px lower 15px left 20px;

Margin (outside spacing)

1, margin-top: Upper Spacing

2, Margin-bottom: Lower spacing

3. Margin-left: Left pitch

4, Margin-right: Right spacing

Commonly used in the horizontal center of the module use: margin:0px auto;margin and padding How to distinguish between, in fact, padding is the content and the border gap. Margin is the gap between modules and modules.

On CSS (block-level elements, row-level elements, box models)