To do the Web page need to master the eight CSS layout skills _ Experience Exchange

1. Detect immediately if in doubt

It saves a lot of headaches if you can do a simple test of the original code in an error. There are detection tools available for both XHTML and CSS, see http://validator.w3.org. Please note that errors at the beginning of the file may cause more errors due to improper structure, etc., and we recommend that you correct some of the most obvious errors before re-testing, which may cause the number of errors to be reduced.

2. When using the floating function, remember to clear the 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 rectangle of the perimeter container or otherwise, make sure that you are doing the right thing. See Eric Meyer teaching on the complex Spiral Consulting Web site.

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

You might be overwhelmed by the amount of space you shouldn't have, or if you need a little space, you can't squeeze it out. If you use margin, it is easy to create a coincident border, and Andy Budd explains the possible practices on his website.

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

The Windows version of IE often causes width and height calculation problems. There are ways to work around this problem, but if the parent element needs to specify a height and width, it is best to apply a margin to the child elements within the parent element, or to apply padding to the parent element when the child element needs to specify a height and width.

5. Do not rely on min-width/min-height

Windows IE does not support two syntaxes. But in a way, the 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 results you want.

6. If in doubt, reduce the percentage first

Sometimes some errors make 50%+50% a 100.1%, causing problems with the Web page. Try changing these values to 49%, or even 49.9%.

7. Remember the "troubled" notation

The shorthand syntax for border,margin and padding is in a specific order, starting from the top to the clockwise direction: Top,right,bottom,left. So margin:0 1px 3px 5px; The result is no boundary above, 1 pixels to the right, and so on. Remember "Trouble" and you won'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)

