CSS top tips broadcast, div+css layout must know _ experience Exchange

CSS Top tips broadcast, div+css layout must know _ Experience Exchange

Font size using px

Declaring CSS in one line
Compare the following two:

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 looks really formatted, but doesn't help in reading. Writing in one line allows you to find the part that you need faster.

I used to write a similar second way, but gradually found as the article said, not much use. A line that looks refreshed and saves space can also make files smaller.

Chunked Writing code
This writing code can make CSS more page, in the case of problems can be found in the shortest possible time to find the problem. Just like this:

#content {float:left;}    #content p {...} #sidebar {float:left;}    #sidebar p {...} #footer {clear:both;}    #sidebar p {...}

Browser support
Only the latest browsers are supported. That means giving up IE5 and IE5.5. That will save you a lot of time. For IE6, the box model hack is not used. The same effect can be achieved with only a few hack, if only for popular browsers.

I pay attention to the new homepage of NetEase CSS, which unexpectedly a!important or hack are not, but in the FF and IE show the effect is very good. Reasonable use of CSS can avoid hack. Of course, the debugging time will be more.

Include floating elements
All content within the container should be designed to be consistent with the container. If it is too large, it will slide to the wrong position. Using a negative margin to adjust to the outside of the container will also cause slippage.

Understanding Overflow
If there are two floating elements in the page, outputting too much content inside the left container causes the right container to run below. This means that your margin, width, or padding settings are confusing, but not in FF. Use Overflow:hidden or overflow:scroll to avoid ie allowing content to burst out of the container.

Allow block elements to be automatically filled with whitespace

Abbreviation CSS
A lot of people are margin-top, Margin-right, Margin-bottom, margin-left with a bunch. In fact, this is the most basic, margin can be directly abbreviated to margin: upper right bottom left value. You can see the summary of the CSS abbreviations here.
Avoid unnecessary selectors
Minimize the selection of the style selector. If you find yourself constantly writing ul li {} or table tr td{} It proves to be too detailed. Fewer selectors will make it easier for you to spot problems.

I did not fully translate, and there are a lot of my own words, hehe.

The above is the CSS top tips, div+css layout must know _ experience exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

