Summary: reference content when creating a webpage to write CSS

1. Verify if you have any questions.
Verify the code before debugging. Incorrect XHTML/CSS format may cause many errors.
First, write and test CSS code in your most commonly used browser, and try to improve the code as much as possible. Then try to be compatible with other browsers. In this way, your code is compliant with the standard from the very beginning, and you do not have to worry about supporting other browsers. (The standard browsers are Mozilla/Firefox, Safari, and Opera)
2. Make sure that the expected results do exist.
The proprietary CSS extensions of many browsers do not exist in official standards. For example, filter and scroll bar style are useless in other browsers except IE. If the validators tell you that the code is not defined, it is very likely that you use a private style, so it is difficult to achieve consistent results in different browsers.
3. If there is a floating, use clear in due time
If a floating object is found to be faulty, consider clear!
4. Merge margins
If margin is used, there is a problem with the margin merge speech. Avoid applying padding/border and fixed width to the same element at the same time. When the child element is fixed, specify the padding for the parent element.
5. Avoid blinking of unspecified style content in IE.
If you only use @ import to enter an external style sheet, IE will flash later. Before applying css, unformatted HTML text will appear temporarily.
6. Poor min-width
IE does not support it, but it treats width as min-width.
7. If you use an anchor, be careful when applying the hyperlink style.
If you use a traditional anchor (<a name = "anchor">) in the code, you will notice that the hover and: active pseudo classes also act on it. To avoid this situation, you can use the id
8. "LoVe/HAte" link rules
You must specify the pseudo-category of a hyperlink in the following order: Link, Visited, Hover, and Acitve. Any other order is inappropriate. If: focus is used, the order should be LVHFA.
9. Remember the clockwise border.
Border (border), margin (margin), and padding (padding) are abbreviated in the order that Top, Right, Bottom, and Left start clockwise. For example, margin: 0 1px 3px 5px; indicates that the top margin is zero, and the right margin is 1px.
10. Specify the unit for a non-zero value.
Specify the font, margin, or size in CSS. Some browsers depend on the processing method of unspecified units. Zero is zero. No unit is required, whether it is px, em, or other units. Example: padding: 0 2px 0 1em;
11. Test different font sizes.
Advanced browsers like Mozilla and Opera allow font scaling, no matter what unit you use. The default font size of some users must be different from yours. Try your best to satisfy them.
Use embedded testing and change to input when publishing.
12. Embedding a style sheet in your HTML source code can eliminate many cache errors during testing, especially in some browsers on Mac. Before publishing a style sheet, remember to move it to an external file and use @ import or <link> to introduce it.