Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the eight DIV CSS page layout problems that perplex beginners. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Let's focus on eight solutions to DIV CSS page layout problems that perplex beginners.

CSS fundamentals: eight web layout problems troubling beginners

DIV CSS page layout, saying it is difficult, is actually very simple; saying it is easy, there are often a lot of problems troubling beginners. Today, I would like to introduce eight related tips. I believe these tips can help you with twice the result with half the effort.

First, if in doubt, test immediately.

A lot of headaches can be saved if you can simply detect the original code when something goes wrong. The W3C has detection tools available for both XHTML and DIV 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 and then re-detect them, which may reduce the number of errors.

Remember to clear the instruction properly when using the floating function

Floating in the DIV CSS page layout is a dangerous feature that may not necessarily produce the results you expect. If you encounter a border where a floating element extends to the outer container or other irregularities, make sure you are doing the right thing.

Third, use padding or border to avoid boundary coincidence

You may be obsessed with space that should not be present at all, or you may not be able to squeeze out when you need a little space. If you use margin, it's easy to have boundary coincident.

Fourth, try to avoid specifying both padding/border and height or width for the element

IE for Windows often leads to computational 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, * * can apply margin to the child elements within the parent element, or padding to the parent element when the child element needs to specify the height and width.

Don't rely on min-width/min-height

IE for Windows does not support two grammars. But to some extent, IE for windows can achieve the same effect as min-width/min-height, so as long as you do some filtering on IE, you can achieve the results you want.

If in doubt, reduce the percentage first

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

Remember how to write "TRBL"

The abbreviated syntax of border,margin and padding in DIV CSS page layout has a specific order, starting from the top to rotate clockwise: top,right,bottom,left. So the result of the margin:01px3px5px; is borderless at the top, 1 pixel on the right, and so on. Remember "TRBL" and you won't get it wrong.

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

This requires special attention, and many novice friends often ignore this problem. The problem has been emphasized more than once.

These are the eight DIV CSS page layout problems that the editor shares with you. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.