8 CSS Layout tips must be mastered

1. 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 http://validator.w3.org Please 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 after some of the most obvious errors, which may lead to a reduction in the number of errors.

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 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, it is easy to create a superposition of boundaries; Andybudd explains the possible practices on his website.

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. 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. Remember the "troubled" notation

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)