DIV + CSS as a summary of common mistakes on Web pages

1. Check whether the HTML element has a spelling error and whether it has forgotten the end mark.
Even veteran engineers often mistake the div nesting relationship. You can use the dreamweaver verification function to check whether there are any errors.

2. Check whether CSS is correct.
Check whether there are spelling mistakes, whether the end is forgotten, and so on. CleanCSS can be used to check whether CSS spelling is correct. CleanCSS is a tool for CSS weight loss, but it can also check spelling errors.

3. determine the location of the error.
If the error affects the overall layout, you can delete the div blocks one by one until a div block is deleted and displayed as normal. Then, you can determine where the error occurs.

4. Use the border attribute to determine the layout characteristics of the error element.
An error occurs when you use the float attribute layout. Add the border attribute to the element to determine the element boundary.

5. The clear attribute cannot be specified for the parent element of the float element.
If the clear attribute is used for the parent element of the float element in MacIE, the layout of the surrounding float element will be chaotic. This is a famous bug of MacIE. If you do not know it, it will lead a detour.

6. the float element must specify the width attribute.
Many browsers have bugs when displaying float elements with unspecified width. Therefore, regardless of the content of the float element, 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 attributes such as margin and padding.
IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify the margin and padding attributes for the float element (you can nest a div inside the float element to set the margin and padding attributes ). You can also use the hack method to specify a special value for IE.

8. The sum of float elements must be less than 100%.
If the sum of the float elements width is exactly 100%, some ancient browsers will not be able to display normally. Therefore, make sure that the sum of width is less than 99%.

9. Have you reset the default style?
Some attributes, such as margin and padding, are explained differently in different browsers. Therefore, it is best to set all the margin, padding to 0, and list style to none before development.

10. Have you forgotten to write the DTD?
If the display results of different browsers are different, check whether the following line of DTD has been written at the beginning of the page:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">