DIV CSS page layout needs to master the eight skills

If you're familiar with the techniques you need to master div CSS page layouts, here's a good habit that might make your design cycle a little bit shorter.

DIV CSS page layout needs to master the skill summary

Here are eight of the necessary tips for CSS design, and good habits can make your design cycle a little shorter.

1.DIV CSS Page Layout if you have any questions, check immediately.

If you can make a simple test of the original code in case of an error, you can save a lot of headaches. The consortium has detection tools available for both XHTML and CSS, see. Note that errors at the beginning of the file may cause more errors due to improper structure and so on, and we recommend that you check again after some of the most obvious errors, which may cause the number of errors to explode.

2.DIV CSS page layout when using floating function remember to clear instructions properly

Floating is a dangerous feature that does not necessarily produce the results you expect. If you encounter a floating element that extends to the bounding box or other abnormal conditions, make sure you are doing the right thing first. Please refer to Ericmeyer's teaching on the Complexspiralconsultingweb website.

3. Use padding or border to avoid when the border is coincident

You may be overwhelmed with space that you shouldn't have, or if you need a little space, you can't squeeze it out. If you are useful to margin, then it is easy to create a superposition of boundaries; Andybudd on his website to explain the possible approach.

4. Try to avoid specifying padding/border and height or width of elements at the same time

Windows version of IE often results in the calculation of width and height. Some methods can solve this problem, but if the parent element needs to specify the height and width, it is best to apply margin to the child elements within the parent element, or to apply padding to the parent element when the child element needs to specify the height and width.

5.DIV CSS page Layout do not rely on min-width/min-height

Windows version of IE does not support both syntaxes. But in a way, Windows version of IE can achieve the equivalent of min-width/min-height effect, so as long as the IE do point filtering function, you can achieve the desired results.

6. If in doubt, reduce the percentage first

Sometimes some errors make 50%+50% 100.1%, causing the page to have problems. Then try to change these values to 49% or even 49.9%.

7.DIV CSS page layout, remember "troubled"

The shorthand syntax for border,margin and padding is in a specific order and rotates clockwise from the top: top,right,bottom,left. So margin:01px3px5px; The result is no border above, 1 pixels to the right, and so on. Remember "Trouble" and you don't get the wrong order.

8. Specify the unit as long as it is not a zero value

CSS requires you to specify units for various values, such as each font,margin. (The only exception is Line-height)