Shulou(Shulou.com)06/02 Report--

This article will explain in detail what are the good habits of CSS writing, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Discuss with you how to develop good CSS writing habits, good CSS writing habits will undoubtedly greatly improve the speed of web page development and reduce the probability of BUG, here are some parts that need to pay attention to in the preparation of CSS.

How to develop good CSS Writing habits

Developing good CSS writing habits will undoubtedly greatly improve the speed of web page development and reduce the probability of the emergence of BUG. Here are some parts that you need to pay attention to in writing CSS, which you can refer to. When writing CSS related parts, I hope it can be helpful.

1. Have you reset the default style?

Some properties, such as margin, padding, etc., will be interpreted differently by different browsers. Therefore, * * set all margin and padding to 0, list style to none and so on before development.

2. Check whether the HTML element has spelling mistakes and forget the closing tag.

Even veterans often get the nesting relationship of div wrong. You can use dreamweaver's verification function to check for errors.

3. Check whether the CSS is correct

Check to see if there are any spelling mistakes, if you forget the ending}, etc. You can use CleanCSS to check for spelling errors in CSS. CleanCSS is supposed to be a weight loss tool for CSS, but it can also check for spelling mistakes.

4. Determine the location of the error

If the error affects the overall layout, you can delete the div blocks one by one until the display returns to normal after deleting a div block to determine where the error occurred. Of course, pay attention to the backup of the original code before testing.

5. Use the border attribute to determine the layout characteristics of the error elements.

Accidentally laying out using the float attribute can lead to errors. At this point, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.

6. The parent element of the float element cannot specify the clear attribute

Under MacIE, if you use the clear attribute on the parent element of the float element, the layout of the surrounding float elements will be confused. This is MacIE's famous bug. If you don't know it, you will take a detour.

7. The float element must specify the width attribute

Many browsers have bug when displaying float elements that do not specify a width. So be sure to specify the width attribute for the float element, regardless of its content.

8. The float element carefully specifies attributes such as margin and padding

IE has bug when displaying float elements that specify margin and padding. So be careful to specify the margin and padding attributes on the float element. You can also use the hack method to specify a special value for IE. 52CSS.com has a detailed introduction to this knowledge.

9. The total width of float elements should be less than 100%.

If the sum of the widths of the float elements is exactly 100%, some old browsers will not display properly. So make sure the sum of the widths is less than 99%.

10. Did you forget to write DTD

If the results are different no matter how you adjust the display in different browsers, you can check to see if you forgot to write DTD at the beginning of the page.

11, after the page is written, remember to confirm it in different IE versions and in some commonly used browsers such as FireFox.

About the formation of good habits of CSS writing which are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.