css02

1. Box model: Box model, ① The actual width of the object = left and right outer margins + left and right borders + left and right inner margins + width; ② The actual height of the object = top and bottom outer margins + top and bottom borders + top and bottom inner margins + height;

2. Margin: margin: value: ①top (top) right (right) bottom (bottom) left (left); ②value: a value, the same in four directions; ③top/bottom (top/bottom) left/right ( Left/right): consistent up and down, consistent left and right; ④auto: left and right horizontally centered, up and down invalid (the prerequisite is to set the width);

3. Margin merging: Two vertical margins meet to form one margin, the one with the larger value is the main one;

4. Margin overflow: parent-child elements, set the top and bottom margins of the child element, which results in the effect on the parent element (the parent element has no border, and occurs when the first child element is set); Solution: ① Set the top and bottom borders of the parent element; ② Set inner margins for the parent element to replace the outer margins of the child elements; ③ Add an empty table to the parent element as the first child element;

5. Padding: padding: value: ①top (top) right (right) bottom (bottom) left (left); ②value: one value, the same in four directions; ③top/bottom (top/bottom) left/right (Left/right): Consistent up and down, consistent left and right; * The padding of inline elements does not affect other elements;

6. Background: ①Background color: background-color; ②Background image: background-image: url (relative path); ③Background tile: background-repeat: a, repeat: default, tile both horizontally and vertically; b, no-repeat: no tiling; c, repeat-x: horizontal tiling; d, repeat-y: vertical tiling; ④ background size: background-size: a, value/percentage; b, cover: expand the background image to Complete coverage; c. contain: the background image is expanded to one side to adapt; ⑤ background fixed: background-attachment: a. scroll: default, scrolling; b. fixed: fixed, the background does not change with the scroll bar; ⑥ background positioning: background-position: x (value positive right offset/horizontal keyword) y (value positive downward offset/vertical keyword) ⑦Sprites diagram: Move the required image to the upper left corner of the sprites diagram; ⑧Background synthesis: background: color url() repeat attachment position；

7. Gradient: ① Linear gradient: background-image: linear-gradient (angle (direction, keyword or angle), color-point1 (change color, color position), color-point2...); ② Radial gradient: background-image: radial-gradient ([size at position] (radius at circle center position), color-point1 (color position/proportion), color-point2...); ③ Repeating linear gradient: background-image: repeating-linear -gradient (angle, color-point); * color-point: The position must be an absolute value (px), not a relative %;

8. Version compatibility: Add a compatible prefix before the value gradient function, ①Firefox: Firefox, -moz-; ②Chrome: Google, -webkit-; ③Opera: Open, -o-; ④IE: Internet Explorer, -ms- ;