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

This article introduces the knowledge of "what are the common mistakes in the layout of css+div pages?" in the operation of actual cases, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Check to see if the HTML element tag has spelling mistakes and forgets the closing tag

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

two。 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 (css compression), but it can also check for spelling mistakes.

3. Determine where the error occurred

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.

4. Using the border attribute to determine the layout characteristics of the error element

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 is to find out (also known as float generation, learn how to clear css floats).

5. 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.

6. 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.

In addition, try to use em instead of px as units when specifying elements.

7. Float elements cannot specify attributes such as margin and padding

IE has bug when displaying float elements that specify margin and padding. So do not specify the 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 extraordinary values for IE.

8. The sum of the widths 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%.

9. Has the default style been reset?

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

10. Did you forget to write the DTD-DOCTYPE statement?

If the display results vary from browser to browser no matter how you adjust it, check to see if you forgot to write the following line of DTD at the beginning of the page:

But now DOCTYPE can be abbreviated as:

This is the end of the content of "what are the common mistakes in the layout of css+div pages?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.