CSS code layout Eight most common errors

A lot of people are learning about CSS while doing it, because it's not as complex as C #, it seems simple, but it is this incomplete understanding of CSS that leads to a lot of CSS code breaking the layout, or bringing endless debugging, which summarizes eight of the most common bugs, And the way they solve it:
1. Do not read or read the documents of the standard of the consortium.

The image above is a screenshot of the World View CSS 2.1 specification, this is the only official detailed description of the CSS2 feature, most of which are dry, but fortunately there are a lot of short and useful parts that you can check out when you don't know some CSS performance, and here's a list of the more common ones:
1. Box model (the box models)
2. Selector (selectors)
3. Visual format models (visual formatting model) especially floating (floats) and block formatting (blocks formatting contexts)

2.DIV Label Soup ()
The most easily encountered case of a new handwritten page: div porridge, no matter where it is written with a large pile of div tags. For example, use DIV to simulate the form, this usage is completely unreasonable, increased the label of the page pollution, this practice brings a series of problems: the page loading slow, need to write more CSS, code is not easy to maintain and so on.
This kind of Div syndrome basically comes from the misunderstanding of the basic working mechanism of the style sheet. For example, a person wrote a 3-story div nesting, add the corresponding style to each div, such as the first div setting the background color, the second setting the outer margin and the third setting the font size, but what he doesn't realize is that unless absolutely necessary, these attributes can be combined into a div to implement.
Another reason seems to be to use DIV tags to replace more appropriate tags such as h1/h2/li, which should be avoided because it can cause problems for users who use subscribers, old browsers, or mobile browsers.

3.ID or class?

This picture is very vivid, the Orange is class, the blue is the ID. Using class or ID, this is a significant part of the people who have not mastered the logical CSS layout of a common problem, clarify: ID is to define a project, and class can define multiple projects. A very popular example, your ID card number is the IDs, and the ID card written "China" is class, many people's identity card is written in China, but the number is different from yours.
But do not use class everywhere, this is still a problem with the understanding of CSS, the following figure illustrates the misuse of class and reasonable use of ID difference:

4. Ignore abbreviations.
This is a performance aspect of CSS, and the following example illustrates the problem:

daimaren.cn©2009-2010 by Tomie Zhang

1 2 3 4 5 6 7

border-top-width:1px; border-left-width:1px; border-right-width:1px; border-bottom-width:1px /* above and below equivalent * * border-width:1px 1px 1px 1px;

The general abbreviation order is upper right and lower left, remember the clock direction starts from 12 o'clock.
The following is a small list of the most commonly used abbreviated properties:

* Font:style, weight, size, family. Eg:font:italic Bold 12px Helvetica
* border:width, style, color. eg:border:1px solid #ccc.
* Background:color, image, repeat. Eg:background: #000 url (image.png) no-repeat.
*Hex color value can be 6-bit abbreviation for 3-bit, such as: #111111, #111.

Click to download a complete summary of abbreviations: Css-cheat-sheet

5. Ignore doctype.
Web browsers are designed to handle almost any Web page, including, of course, a mess of pages: The tags are closed in the wrong place, not closing all the tags, the tags are off, but never open, too numerous. The browser will try to accommodate any tags you write. Different browsers will show different broken codes, resulting in a lot of headaches later. One of the best ways to do this is to add DOCTYPE to the page.
In the HTML4 era, you can declare that the document is DOCTYPE or transitional or something completely different, but fortunately from the IE6 start browser to support the new Html5doctype, the browser into the standard mode, and corresponding to the bizarre mode (quirks mode).

daimaren.cn©2009-2010 by Tomie Zhang

<!doctype html>

DOCTYPE is very good plus, remember to put it at the top of the document each time.

6. Improper use of units.
Do not use PX to define font size, the use of PX to define font size should be a table layout era of an old habit, and corresponding to the pixel font in the 1024*768 resolution looks OK, but the era is constantly changing, now 1024 resolution of the share is falling, This means that 1920 of the display will feel the word is very small.
How to solve? With the EM unit definition, such as font-size:1.2em, which means that the font is 1.2 times times the default font, the equivalent of 16px in Firefox and IE, the advantage of using EM is that you can control the font size of the whole station by changing the font size of the body tag or any other external label. Make the fonts flexible, and PX is not possible unless you use the zoom function of the browser.
In addition, fonts should not be defined with units such as PT, CM, and 1em and 100% are equivalent, but the latter takes up more space and has its own quirks.

7. Use to clear floating elements.
Stop writing such as <div style= "Clear:both" ></div>, and Element:after {content: "."; Clear:both;visibility:hidden;height:0;display:block} These are hacks, not the best way to do it. Should be as follows:

daimaren.cn©2009-2010 by Tomie Zhang

#container {Overflow:hidden}
/*ie6 hack*/
#container {display:inline-block} #container {Display:block}

Why use Overflow:hidden, because it has magical magic, specifically explain the document interpretation of the view of the consortium.
(This is open to question, thanks to the idea of smallto, floating removal methods and their advantages and disadvantages see Uncle Puma's summary)

8. Ignore validation.

Fortunately, more and more people are joining the ranks of Web standards and actively working on their websites, and unfortunately, there are many sites that do not realize that invalid tagging means more work in the future.
The consortium provides us with HTML online parity and online effectiveness of CSS