CSS Web page making tips: div+css page layouts often make error totals

Article Introduction: with the growing popularity of CSS page layout, most of the domestic web site has adopted the layout of CSS Web page production methods. It is easy to make mistakes when applying DIV+CSS coding, here are some common mistakes to help novice friends learn better and improve.

With the growing popularity of CSS page layout, most of the domestic web site has adopted the layout of CSS Web page production methods. It is easy to make mistakes when applying DIV+CSS coding, here are some common mistakes to help novice friends learn better and improve.

First, check whether the HTML element has spelling errors or forget the end tag even veteran also often mistook div nesting relationships. You can use the Dreamweaver verification function to check for errors.

Second, check the CSS is correct

Check to see if there are any spelling errors, forgetting the end of the}, and so on. You can use CLEANCSS to check your CSS for spelling errors. CLEANCSS is a tool for CSS to lose weight, but can also check out spelling mistakes.

Third, determine where the error occurred

If the error affects the overall layout, you can delete the div block individually until a div block is removed and the display returns to normal to determine where the error occurred.

Iv. using the Border attribute to determine the layout characteristics of error elements

Using the Float property layout accidentally makes an error. Adding the border attribute to the element determines the bounds of the element, and the reason for the error is the bottom line.

The parent element of the float element cannot specify the clear property

Macie If the clear attribute is used for the parent element of a float element, the surrounding float element layout is confused. This is the famous bug of Macie, if do not know will detours.

Six, float element must specify the Width property

Many browsers have bugs when displaying float elements that do not specify a width. So regardless of the float element's content, be sure to specify the width property for it.

Seven, float element cannot specify attributes such as margin and padding

IE has a bug when displaying float elements that specify margin and padding. Therefore, do not specify the margin and padding properties for float elements (you can set up margin and padding by nesting a div inside a float element). You can also use the Hack method to specify special values for IE.

The sum of the width of the float element is less than 100%

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

Nine, do you reset the default style?

Some properties, such as margin, padding, and so on, can be interpreted differently by different browsers. Therefore, it is best to first of all margin, padding set to 0, list style set to none and so on.

Ten, whether to forget to write a DTD

If no matter how you adjust the results of different browsers, you can check the beginning of the page.