Note: Chapter 4 "proficient in css" box model, positioning, floating, cleaning, Chapter 4 "proficient in css"

Note: Chapter 4 "proficient in css" box model, positioning, floating, cleaning, Chapter 4 "proficient in css"
Chapter 3 box model, positioning, floating, cleaning

1. attributes used by the box model: width, height, padding, border, margin

The upper and lower vertical margin of a normal Document Stream is superimposed.

 

2. block-level boxes and in-line boxes, use the display attribute to change features, such as display: block and display: inlne-block.

 

3. Three basic Positioning Mechanisms: normal stream, absolute positioning, and floating

 

4. Relative positioning

It is part of normal stream positioning and is related to the document stream. It is moved based on its original location.

Whether moving or not occupies the original space position: relative

Set the attribute values of top, right, bottom, and left to move

 

5. Absolute Positioning

No space occupied is irrelevant to the Document Stream,

Position: absolute

Text-align: top/right/bottom/left

 

Fixed Positioning

Is a position of absolute positioning: fixed

The difference is that the included block is the viewport.

 

6. Floating float

Clean (p51)

Float: left

Float: riagt

Clear: both/left/right/none (neither side is allowed/left is not allowed/right is not allowed/both sides are allowed)

<Br class = "clear"/>