Summary of some CSS/XHTML knowledge summarized by the Web Standard 1st/3

1. There are many compatibility issues because different labels have different default padding margin values in different browsers. So we can define it in advance. CopyCode The Code is as follows: * {padding: 0; margin: 0 ;}

OrCopy codeThe Code is as follows: ul, Li, H1, H2, H3, H4, H5, H6, P, table, TD, Div, IMG, HR, DD, DT, span,, DT, DD, Ol {margin: 0; padding: 0; font-size: 12px ;}

2. For the layout, you can see how the template in Dreamweaver CS3 is written. It is the best way to write it. You can directly use the default templates in Dreamweaver cs3. Then, remove the comment and you will be able to use it.

3. Use margin/padding as appropriate. When adjusting the element position in the box, it is better to use the padding of the box. Do not use the element margin in the box.

The reason is that when the elements in the box use margin, it will affect the margin of the box and cause dislocation.

But when using padding, pay attention to the following: for example, if the originally width: 100px box is set, if the padding-left: 20px is set, the width must be reduced to 20px.

4. After border is set for a box, width should be subtracted from the width of border. For example, if the width of a box is 100px and the left side is 1px, set the width of the box to 98px.

5. When adding a box, do not grant the width and height values.

Height can be opened by internal elements.

If the width is not set, the default value is 100%.

6. To set the background image and background color for a box at the same time, first set the background image and then set the background color. The Code is as follows:Copy codeThe Code is as follows:. bg {Background: URL (/images/blbian.gif) No-repeat}
. Style1 {width: 100px; Height: 100px; Background-color: # ebf1e5 ;}
<Div class = "style1 BG"> </div>

7. When float: Left and other things are written too much, affecting the surroundings or the following elements, try to clear them with clear: Both.

Copy code The Code is as follows: <br class = "clearfloat"/>
. Clearfloat {
Clear: both;
Height: 0;
Font-size: 1px;
Line-Height: 0px;
}

8. When you perform the following settings, <Div style = "height: 3px"> </div> causes compatibility issues. IE6 may cause problems and you will find that the box is not 3px High.
The following settings are required: font-size: 1px. Refer to the clearfloat statement in the DW CS3 template and add line-Height: 0px. However, I found that it is also possible to leave it alone. But the addition will be more formal.

9. Set line-height when setting the height of a single line of text. Otherwise, there will be compatibility issues, and there will be a small misplacement of text.

10. When using the UL Li list, you must set list-style-type: none for UL; otherwise, compatibility problems may occur. FF will show the origin, and IE will often not see.