Home  >  Article  >  Web Front-end  >  Several tips you need to know when laying out DIV CSS web pages_html/css_WEB-ITnose

Several tips you need to know when laying out DIV CSS web pages_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:27:23889browse

This article briefly describes the skills you need to master for DIV CSS web page layout. Good habits may double your design cycle. Let us learn together.
Are you familiar with the skills you need to master for DIV CSS web page layout? Let me share them with you. Good habits may double your design cycle. The following are a few tips for CSS design
1. If you have any questions about DIV CSS web page layout, check it immediately
If you can simply check 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 in DIV CSS web page layout
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 boundaries overlap to avoid
Sometimes 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. If you use margin, it is easy to overlap the borders;
4. Try to avoid specifying padding/border and height or width on the element 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 when laying out DIV CSS web pages
The Windows version of IE does not support the two 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 the writing method of DIV CSS web page layout (TRBL)
The abbreviated syntax of Border, margin and padding has a specific order, starting from the top and turning clockwise: top, right, bottom, left. So margin: The result of 01px3px5px; is no border at the top, 1 pixel on the right, and so on. This way you won't get the order 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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn