9 common mistakes in CSS layout

web front end five thousand seven hundred and sixty-four 13 years ago (2011-03-22)

For beginners, there will be many problems. Of course, there are also many problems. Here are some common mistakes and simple ways to eliminate them:
1. Check whether the HTML element is misspelled and the end tag is forgotten
Even seasoned people often mistake the nesting relationship of divs. You can use dreamweaver's verification function to check for errors.

2. Check whether CSS is written correctly
Check for spelling mistakes, forgetting the ending}, etc. You can use CleanCSS to check for spelling errors in CSS. CleanCSS was originally a tool to lose weight for CSS, but it can also check spelling errors.

3. Use the deletion method to determine the location of the error
If the error affects the overall layout, you can delete div blocks one by one until the display returns to normal after deleting a div block, and then you can determine where the error occurred.

4. Use the border attribute to determine the layout characteristics of the error element
If you are not careful to use the float attribute layout, an error will occur. At this time, the border attribute is added to the element to determine the element boundary. The cause of the error is revealed.

5. The parent element of the float element cannot specify the clear attribute
In MacIE, if the clear attribute is used for the parent element of the float element, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will go astray.

6. The width attribute must be specified for the float element
quite a lot browser There will be bugs when displaying float elements without width specified. So no matter what the content of the float element is, you must specify the width attribute for it. In addition, when specifying elements, try to use em instead of px as the unit.

7. The float element cannot specify such attributes as margin and padding
IE has a bug when displaying the float element with margin and padding specified. Therefore, do not specify margin and padding attributes on the float element (you can set margin and padding by nesting a div inside the float element). You can also use the hack method to specify special values for IE.

8. Have you reset the default style?
Some attributes, such as margin and padding, can be interpreted differently by different browsers. Therefore, it is best to set all margin and padding to 0 and list style to none before development.

9. Did you forget to write DTD?
If the display results of different browsers are different no matter how you adjust them, check whether you forgot to write the DTD declaration at the beginning of the page.