The front end of the road --css articles (on)

A selector (selecting how css html element)
1)

1. id selector
2. class selector
3. Tag selector
4. Wildcard selector, i.e.,*{ }
5. Attribute selectorsdiv[id = "only"]
6. Father and son selector / descendent selectors
7. Direct child element selector
8. Parallel selector
9. A packet selector

2. Css right selector weight:
   Important ---------> Infinity;!
   Inline style ---------> 1000;
   ID --------> 100;
   class / properties selector / pseudo class selector --------> 10;
   tag selector / pseudo-element ---------> 1;
   wildcard selector --------> 0.
   two, position positioning

1. Absolute positioning absolute: positioning in relation to the nearest parent to locate, if not, then positioned relative to the document. From the original position to position. (Layer model)
2. Relative positioning relative: positioning with respect to their original position. Retain the original position to position.
3. Fixed positioning fixed.
   Third, two classic bugs
   . 1, the BFC (formatting context)
   . 1) of the BFC characteristics:
   ① inside Box will in the vertical direction starting from the top one by one place.
   ②Box vertical distance is determined by the margin. Belong to the same two adjacent margin of a BFC is superimposed occur Box
   ③ Box left margin of each element, comprising the left block border box in contact (for a left to right format, or vice versa). The same is true even if there are floating.
   ④BFC area do not stack with the float box.
   ⑤BFC separate containers is isolated on a page, the sub-elements inside the container to the outside does not affect the element, and vice versa.
   ⑥ when calculating the height of the BFC, the floating elements are also involved in the calculation.
   2) trigger the BFC:
   ① a float other than none value, 　　
   ②overflow value (hidden, auto, scroll) in addition to the visible that is,
   ③ the display (Table-Cell, Table-Caption, inline-Block, Flex, inline-Flex),
   ④ position is (Absolute, Fixed),
   ⑤fieldset element.
   2, margin merger.
   refers to the outer margin combined block-level elements from the lower margins may be combined into a single margins.
   (1) In the block-level element, not including the floating elements and absolute positioning.
   (2) occurs only in the direction of the current document and perpendicular to the direction of flow.
   ① scene
   The combined margin adjacent sibling elements, may be provided to fix the floating elements:
   
   results are as follows:
   When not writing float:lefttime, since the first and second rows of elements combined together, so their pitch is 1 rem, rather than summed up and down.
   ② scene
   parent and child combined and used to resolve the overflow property:
   
   results are as follows:
   
   We can also be set by the parent element to block element context format, provided border, padding, etc. to solve the problem.
   ③ scene
   combined block elements empty stage, the empty block-level element to a combined height of the margin can be avoided problems.
   
   Results are as follows:
   Before the height did not increase:
   
   increase the height after:
   
   Note: The new hand-written blog, if wrong, please correct me, thank you!