10 minor mistakes in CSS web page layout

Even a CSS Guru will inevitably write CSSCodeOr, any code is like this. Small errors often cause major problems, and waste a lot of time debugging and troubleshooting. Check the following 10 small mistakes that are easily made in the CSS web page layout. Try to correct the mistakes you may make to accelerate your front-end development efficiency.

1. Check Html Whether the element has a spelling error or 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 correctly written.

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. Use the delete method to locate 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 error elements

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 smaller 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 you forget to write the DTD declaration at the beginning of the page.