Read "Mastering CSS"--the third chapter of visual format model

A. Box model:

1. IE and box Model: Non-standard box model

2. Margin overlay: Under what circumstances will the margins overlap?

1) two vertical block elements

2) Two block elements that contain relationships and no padding and border are separated from each other

3) The outer margin and itself occur superimposed, empty elements, no padding and border

4) The outer margin of an empty element touches the margins of another empty element.

Workaround: The margins of inline elements, floating elements, and absolutely positioned elements are not superimposed. If it contains a relationship, add padding or border.

Two. 3 types of visual format models:

1. Normal flow: block-level elements and inline elements.

1) block-level boxes are arranged vertically from top to bottom, and the distance between the boxes is calculated from the vertical margin.

2) The inline box is arranged horizontally in a row. However, horizontal spacing is changed using the horizontal padding, border, and margin. However, vertical padding, borders, and margins do not affect the height of the inline box. Similarly, setting the height or width of the display in the inline box has no effect.

Line box: A horizontal box formed by a row. The height of the line box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

The only way to modify the dimensions of the inline box is to modify the row height or horizontal border, padding, and margin.

3) Inline-block:ie8 and above support.

2. Absolute positioning

3. Floating: The floating box can move left and right until its outer edge touches the edge of the containing box or another floating box. The float box is also not in the normal flow of the document.

If a floating element is followed by an element in a document flow, then the box of the element behaves as if the float does not exist at all. However, the text content within the box is affected by the floating element and moves to make room.

Clear float: Clear property left, right, both, none.

Principle, if there is a floating box and a non-floating box, then add the clear property to the non-floating box, the principle is to add enough margin to the non-floating box.

If a box contains only a floating box, the way to clear the float is:

A. Add an empty element at the end of the box and add clear property cleanup. This principle is ibid.

B. Add a float to the box as well.

C. Add Overflow:hidden to the box

D. using: After pseudo-classes and content declarations to add new content at the end of a box

Three. 3 Types of positioning:

1. Relative positioning: The element still occupies the original space, whether or not it moves. Therefore, moving an element causes it to overwrite other boxes. That is to raise the level.
2. Absolute positioning: The position of the element is independent of the document flow and therefore does not occupy space. The layout of other elements in a normal document flow is as if an absolutely positioned element does not exist. If you enlarge an absolutely positioned box, the surrounding box does not reposition.
3. Fixed positioning:

Read "Mastering CSS"--the third chapter of visual format model