CSS web page layout is difficult to say, but it is actually very simple. It is said to be easy, but there are often many problems that trouble novices. There are many techniques introduced at http://www.knowsky.com/article.asp?typeid=38 . These tips and knowledge can help everyone get twice the result with half the effort. . However, more often than not, we are often troubled by some small problems and cannot relax. Today I would like to introduce to you eight techniques that appear to be very useful.
1. If you have any doubts, 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. When using the floating function, remember to clear the command appropriately. 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.
3. Use padding or border when the borders overlap to prevent you from worrying about a little space that shouldn't be there, or when you need a little space, you can't squeeze it out no matter what. If you use margin, it is easy to overlap the boundaries.
4. Try to avoid specifying padding/border and height or width for 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 that the abbreviation syntax of "TRBL" for border, margin and padding has 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 to the right, and so on. Remember "TRBL" and you won't get the sequence wrong.
8. As long as the value is not zero, the unit must be specified. This requires special attention. Many novice friends often ignore this issue.