Some CSS/XHTML knowledge summary for learning WEB standards Page 1/3_Experience exchange

1. Many compatibility issues are caused by different tags having different default padding margin values ​​in different browsers. So you can define it in advance

Copy code The code is as follows:

* { padding: 0; margin:0;}

Or

Copy code The code is as follows:

ul,li,h1,h2,h3,h4,h5,h6,p,table,td,p ,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;}

2. Regarding the layout, you can see how the template in Dreamweaver CS3 is written. Its writing method is the best way. For large layouts, you can directly use the default templates in dreamweaver cs3. Then remove the comment and it will work.

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

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

But pay attention to one thing when using padding: For example, if the original width:100px box is set to padding-left:20px, then the width must be subtracted by 20px.

4. For a box, after setting the border, you need to subtract the thickness of the border from the width. For example, if a box with width: 100px has 1px sides on the left and right, the box width should be set to 98px.

5. When adding a box, try not to give width and height if possible.

Height can be expanded by internal elements.

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

6. The method to set the background image and background color for a box at the same time is to set the background image first, and then set the background color. The code is as follows:

Copy code The code is as follows:

.bg {background:url(/images/blbian.gif) no-repeat}
.style1 {width:100px;height:100px;background-color:#ebf1e5; }

7. When float:left and the like When there are too many things written and it affects the surrounding or lower elements, try using clear:both to clear it.

Copy code The code is as follows:

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

8. When making the following settings

, will cause compatibility issues. There will be a problem with ie6. You will find that the box is not 3px high.
The following settings are required: font-size:1px; so that there will be no problem. Refer to the writing method in clearfloat in the dw cs3 template, and also add line-height:0px. But I found that it’s possible not to add it. But the Canadian Association is more formal.

9. When setting the height for a single line of text, set line-height at the same time. Otherwise, there will be compatibility issues and the text will be slightly misaligned.

10. When using ul li list, be sure to set list-style-type: none; otherwise compatibility problems will occur. The origin will appear under ff, but often not visible under ie.