CSS tag Knowledge

One, the difference between the inline label and The Block label

inline, inline, in-line attribute tags:
1, the default peer can continue to follow the same type of label;
2, the content open width
3, does not support the width of the high
4, does not support the upper and lower margin and padding
5. Code wrapping is parsed

Block attribute Tags:
1, the default exclusive line display;
2, no width, the default is full of a row
3. Support all CSS Commands

Second, display

Display:block; Show as Block
Display:inline; Display as inline

Display:inline-block
Characteristics:
1, block in a row display;
2, in-line attribute tags support wide-height;
3, no width when the content open width

Problem:
1, code line is parsed (a space size);
2, IE6 IE7 does not support the block attribute tag Inline-block;

Solution with float label

Three,float label

Floating: Left/right/none

The element is floated, moves out of the document stream, travels in a specified direction until it touches the parent's boundary or another floating element stops

1. Make the block elements appear on one line

2. Make the inline support wide and high

3. Width is not set when width is open by content

4. Out of document Flow

5. Upgrade level half (the contents of the tag will be squeezed out)

Document flow is the position in the document where objects are placed in the arrangement

Clear Left/right/both/none element cannot have floating elements in one Direction

iv. Cursor Type

Cursor:text (text type) |pointer (cursor rendered as a pointer indicating a link (one hand)) |default (the default cursor (usually an arrow))

Change the mouse graph of the current page: body{height:1500px; Cursor:url (hand.cur), pointer;}  

Note: There is no compatibility issue with picture cur.

Five, the front-end specification

1. All writing is lowercase in the English half-angle state;

2, Id,class must start with a letter;

3, all labels must be closed;

4, the HTML tag is indented with the TAB key;

5, the attribute value must be quoted number;

6, <!--HTML comment--(note: There are spaces between the symbols, which is responsible for compatibility issues)

7,/* CSS comments */(note: There are spaces between the symbols, responsible for compatibility issues, especially IE6)

8, UL,LI/OL,LI/DL,DT,DD has a parent-child relationship label;

9, p,dt,h tag inside can not nest block attribute tag;

10, a label can not nest A;

11, inline elements can not be nested blocks;

CSS tag Knowledge