Eight CSS layout skills you need to master when making web pages_Experience exchange

1. If you have any questions, check immediately

If you can do a simple check on the original code when an error occurs, you can save a lot of headaches. W3C has detection tools available for XHTML and CSS, please see http://validator.w3.org. Please note that errors at the beginning of the file may cause more errors due to improper structure and other factors; we recommend fixing some of the most obvious errors first and then rechecking, which may reduce the number of errors.

2. Remember to clear the instructions appropriately when using the floating function

Floating is a dangerous function and may not produce the results you expect. If you encounter floating elements that extend beyond the border of the surrounding container or other unusual situations, make sure you are doing it correctly. See Eric Meyer's tutorial at Complex Spiral Consulting Web.

3. Use padding or border to avoid overlapping borders.

You may be struggling for a little space that shouldn't be there, or when you need a little space, you can't squeeze it out no matter what. It's easy to overlap boundaries if you use margins; Andy Budd explains what's possible on his website.

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

The Windows version of IE often causes calculation problems with width and height. There are some ways to 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 when the child element needs to specify the height and width, apply padding to the parent element to achieve this. Effect.

5. Don’t rely on min-width/min-height

The Windows version of IE does not support both syntaxes. But to a certain extent, the Windows version of IE can achieve an effect equivalent to min-width/min-height, so as long as you add some filtering functions to IE, you can achieve the results you want.

6. If in doubt, reduce the percentage first

Sometimes some errors will make 50% 50% become 100.1%, causing problems on the web page. At this time try changing these values ​​to 49% or even 49.9%.

7. Remember how to write "TRouBLed"

Border, the abbreviation syntax of margin and padding has a specific order, starting from the top and turning clockwise: top, right, bottom, left. So margin :0 1px 3px 5px; The result is no border at the top, 1 pixel on the right, and so on. Remember "TRouBLe" and you won't get the sequence wrong.

8. As long as the value is not zero, the unit must be specified

CSS requires you to specify the unit for each font, margin and other values. (The only exception is line-height)