CSS layout skills

Source: Internet
Author: User
CSS layout skills View: 5924

1. check immediately if you have any questions
If the originalCodeSimple detection can save a lot of headaches. W3C for XHTML and CSS are available detection tools, see the http://validator.w3.org please note that errors at the beginning of the file, may be due to improper structure and other factors cause more errors; we recommend that you correct some of the most obvious errors and then re-check them. This may reduce the number of errors.

2. Remember to clear the command properly when using the floating Function
Floating is a dangerous function and may not produce the expected results. If you encounter floating elements extending to the border of the peripheral container or other abnormal situations, please first make sure that your approach is correct. See Eric Meyer's tutorial on the complex spiral consulting web site.

3. Use padding or border to avoid border duplication
You may be overwhelmed by a small amount of space, or cannot squeeze out any space you need. If you use margin, it is easy to produce overlap of boundaries; Andy Budd explains possible practices on his website.

4. Try to avoid specifying the padding/border and height or width for the element at the same time.
Windows ie often causes the calculation of width and height. Some methods can solve this problem, but if the parent element needs to specify the height and width, it is best to apply margin to the child element within the parent element, or when the child element needs to specify the height and width, apply the padding to the parent element to achieve the effect.

5. Do not depend on Min-width/min-height.
Windows IE does not support two syntaxes. However, to some extent, Windows Ie can achieve the effect equivalent to Min-width/min-height. Therefore, you only need to filter IE to achieve the desired result.

6. If you have any questions, first reduce the percentage
Sometimes, some errors may cause 50% + 50% to become 100.1%, causing problems on the webpage. Change these values to 49% or even 49.9%.

7. Remember to write "troubled"
The abbreviated Syntax of border, margin, and padding has a specific order. The rotation starts from the top to clockwise: Top, right, bottom, left. so margin: 0 1px 3px 5px; the result is that there is no border above, 1 pixel on the right, and so on. Remember "trouble" and you will not be mistaken.

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.