International News

Eight CSS layout techniques you need to master when building your site

Updated:2012-02-08

1. If there is doubt immediately test


If you can make a simple error detection of the original code can save a lot of headaches. The W3C has detection tools available for 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 other factors; we recommend that you correct some of the most obvious errors before re-testing, which may cause the number of errors to explode.


2. When using the floating function, remember to clear the appropriate instruction


Floating is a dangerous function that does not necessarily produce the results you expect. If you encounter a floating element that extends to the outer container border or other irregularities, make sure you are correct. See Eric Meyer at the Complex Spiral Consulting Web site.


3. Border overlap when using padding or border to avoid


You may be a bit should not appear in the space and bruised, or you need a little space, how are not crowded out. If you use the margin, then it is easy to produce the border coincidence; Andy Budd explained on his Web site possible practice.


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


Windows version of IE often lead to the calculation of the width and height problems. Some methods can solve this problem, but if the parent element needs to specify height and width, it is best to apply a margin to the child element within the parent element, or padding to the parent element when the child element needs to specify the height and width effect.


Do not rely on min-width / min-height


IE for Windows does not support two syntaxes. But in a certain extent, the windows version of IE can achieve the equivalent of min-width / min-height effect, so in the web design as long as IE do point filtering, you can achieve the desired results.


6. If in doubt, reduce the percentage first


Sometimes some errors will make 50% + 50% become 100.1%, so that the page problems. Try changing these values to 49%, or 49.9%.


7. Remember the "TRouBLed" wording


Border, margin and padding shorthand syntax has a specific order, starting from the top clockwise rotation: top, right, bottom, left. So margin: 0 1px 3px 5px; The result is no border on the right, the right 1 pixel, and so on . Remember, "TRouBLe", you will not mistake the order.


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


CSS requires you to specify units for each font, Margin, and so on. (The only exception is line-height)


Copyright © Beijing Huamei World Trade Technology Development Co., Ltd. All rights reserved Beijing ICP Preparation 09086139 110112000260