Top-level CSS skills, div + CSS layout required

The font size uses PX.

Declare CSS in a row
Compare the following two items:

H2 {font-size: 18px; Border: 1px solid blue; color: #000; Background-color: # FFF ;}

H2 {
Font-size: 18px;
Border: 1px solid blue;
Color: #000;
Background-color: # FFF;
}

The second one looks indeed formatted, but it won't be helpful in reading. Writing in a row allows you to quickly find the desired part.

In the past, I also wrote the second method, but gradually found thatArticleThe same is true. A row looks nice, fast, and saves space and makes the file smaller.

Multipart writingCode
In this way, the code can be written to make CSS more page-based, and the problem can be found in the shortest time when a problem occurs. As shown below:

# Content {float: Left ;}
# Content P {... }

# Sidebar {float: Left ;}
# Sidebar P {... }

# Footer {clear: Both ;}
# Sidebar P {... }

Browser support
Only the latest browsers are supported. That is to say, you must discard ie5 and ie5.5. This saves a lot of time. For IE6, the hack model is not used. If you only target popular browsers, you only need a few hack to achieve the same effect.

I noticed the CSS of Netease's new homepage, one of which turned out to be! Important or hack does not exist, but it works well in ff and IE. Reasonable Use of CSS can avoid hack. Of course, debugging takes more time.

Contains floating Elements
All content in the container should be designed to be consistent with the container. If it is too large, it will slide to the wrong position. Adjusting to the outside of the container with a negative value of margin also causes slide.

Understanding Overflow
If there are two floating elements on the page, if too much content is output in the left container, the right container will run to the following. This means that your margin, width, or padding settings are messy, but they cannot be reflected in ff. Using overflow: hidden or overflow: Scroll can prevent ie from allowing the content to rush out of the container.

Allow block elements to automatically fill in white space

CSS
Many people use a bunch of margin-top, margin-right, margin-bottom, and margin-left. In fact, this is the most basic, margin can be abbreviated as margin: upper right bottom left value. Here we can see the summary of CSS abbreviations.
Avoid unnecessary Selector
Minimize the selector of a style. If you find that you keep writing ul Li {} or table tr TD {}, it proves that the writing is too detailed. Fewer selectors make it easier for you to discover problems.

I have not completely translated, and there are many other words of my own, haha.