The essence of CSS layout skills_html/css_WEB-ITnose

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 the most obvious ones first Rechecking the errors afterward 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 teaching on the Complex Spiral Consulting Web site.

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 will squeeze it in no matter what. Not coming out. It's easy to overlap borders 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
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 do some filtering on 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, please try to change these values ​​​​to 49%, or even 49.9%

7. Remember the writing method of "TRouBLed"
Border, margin and padding abbreviation syntax have a specific order, Starting from the top and turning clockwise: top, right, bottom, left. So the result of margin: 0 1px 3px 5px; 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
The CSS code requires you to specify the unit for each font, margin and other values. (The only exception is line-height)