W3school CSS Basics Tutorial

First, the Basic Law:

1. The first character of the class name cannot use a number, otherwise it will not work in Firefox;
2. Do not leave spaces between attribute values and units, otherwise it will not work correctly in Firefox or Netscape.

Second, background (background):

1. Background-color cannot inherit, the default value is transparent. If an element does not specify a background color, its background is transparent, and the background of its ancestor element is visible, thus appearing;
2. If only one keyword appears in the background-position, the default is center; If you provide only a percentage, the value provided is the horizontal value, the vertical value defaults to 50%, and if you specify a length value, the offset from the inside edge of the element to the upper-left corner of the image.

Third, text:

1. All block-level elements can be applied text-indent, but cannot be applied to inline elements. If you want to implement indent for inline elements, you can use the left margin. If the percentage is used in Text-indent, the width of the parent element is the base, and if EM is used, it is based on its own font size;
2. Word-spacing are usually used in English subtitles, while letter-spacing can change the spacing between letters and Chinese characters;
3. The Text-shadow is used to set the text shadow, CSS2 contains the property, but CSS2.1 is not preserved, and CSS3 restores and reinforces the property;
4. Font-variant can set the capital letter of the small one;
5. The keyword in font-weight 400 equals normal,700 equals bold.

Four, border (border):

1. The style of the border, in addition to common solid, dotted, dashed, there are double, groove, Ridge, inset, outset equivalent optional;
2. If no color is declared for the border, it will be the same as the text color of the element. If the element does not have any text, it is assumed to be a table whose border is the text color of its parent element.

V. Margin (margin):

When two vertical margins meet, the margin is merged and the height equals the larger one. When an element is inside another element, it is assumed that there is no padding or border separation, and that their upper and lower margins also merge. If an empty element is outside the margin, there is no border and padding, and the upper and lower margins merge. Note: only block boxes in normal text streams will merge, and margins between inline boxes, floating boxes, or absolute positioning will not merge.

Vi. positioning (position):

1. When using relative positioning, it still occupies the original space, regardless of whether the element is moving or not. Therefore, moving an element causes it to overwrite other boxes;
2. An absolutely positioned element whose position is relative to the nearest positioned ancestor element, if there is no positioned ancestor element, then its position is relative to the original containing block. Depending on the user agent, the original containing block may be a canvas or a

Seven, float (float):

A floating element generates a block-level box, regardless of its own element. If the floating elements are non-replacement elements, specify a definite width, otherwise they will be as narrow as possible. If there is only a small amount of space on a line for floating elements to arrange, then this element jumps to the next line, which lasts until there is enough space in a row.