3, 3rd Class CSS block level, inline elements, absolute positioning, relative positioning, fixed position 20150922

1, block-level elements

A: Features:

A.1 is displayed by default in the upper-left corner of the parent tag

A.2 Block-level element fills a row by default (fills the entire document stream)

B: Common block-level elements

P H1--h6 ul Li ol li Div hr table

2. Inline element (inline Element)

A: common = in-line elements are

A span img input

B: Features of inline elements

B.1 size affected by text area, not affected by width height

B.2 inline elements do not occupy a single line

3, inline elements and block-level elements convert each other

A: In-line elements are converted into block-level elements display:block;

B: block-level element conversion in the inner element display:inline;

4, padding

The a:padding is the inner margin, and the result is the width of the outer frame

A.1 padding 10px 20px 30px 40px; Indicates the order of the opening is 10 right 20 down 30 left 40

A.2 padding 10px 20px 30px; show that the order of the Open is 10 or so 20 under 30

A.3 padding 10PX 20PX; Indicates that the order of the Open is about 10 or so 20

A.4 padding 10PX; It means 10 of all around.

5. Margin

A:margin is the distance from the outer border,

6, the border size fixed after the increase of Padding, and then change the original border size, is for div right and bottom operation, the change is the left and the bottom of the distance.

7, padding of the various situations, the element is supported in the line, margin line elements only support around, not support up and down.

8, positioning (absolute positioning, relative positioning)

A: Absolute Positioning Position:absolute

A.1 when the position is set to absolute positioning, leaving the document flow, does not occupy a single line, not affected by the float

A.2 when set to absolute positioning, the element's azimuth receives the form's top left-right bottom effect.

B: Relative positioning positon:relative

B.1 is not out of document flow when set to relative positioning, float has an effect on it

B.2 when set to relative positioning, the orientation is relative to the parent tag of the element; Because the label is not out of the document flow, it is a position.

C: Fixed positon:fixed

C.1 The DIV is not affected by float, it will be fixed in the set position.

　　　　

#d1/  * This div is tightly affixed to the lower right corner */{  width:200px;  height:200px;  BORDER:1PX #808080  solid;  Position:fixed
right:0px;
bottom:0px;       }

3, 3rd Class CSS block level, inline elements, absolute positioning, relative positioning, fixed position 20150922