Sixteen tips and usage of Div CSS layout-divcss tutorial

Source: Internet
Author: User
1. ie cannot tell the differences between the inheritance relationship and the parent-child relationship. All are inheritance relationships.

2. When adding a selector to your tag, do not forget to add comments to the selector in CSS. When you modify your CSS later, you will know why. We also remind you not to be crazy.

3. if you set a deep background image and a bright text effect for a label. We recommend that you set a deep background color for your tag at this time. Because the image is lost, the text can also be readable.

4. Pay attention to the order of the four states of the link: link visited hover active

5. For images unrelated to content, use background. Always remember the representation and content separation.

6. Define the color abbreviation # 8899ff = # 89f

7. UL labels have padding values by default in Mozilla, while only margin has values in IE.

8. The same class selector can be repeated in a document, but the ID selector can only appear once. CSS is used to define a tag using both Class and ID. if the definition is repeated, the definition of ID selector is effective because the ID has a higher weight than the class.

9. A stupid way to adjust the compatibility (ie and Mozilla): beginners may encounter a situation where the attribute of the same tag is normal when it is set to a in IE, in Mozilla, you must set it to B to display the image normally, or you can reverse the two.
Temporary solution: select the character {property name: B! Important; attribute name: A} sometimes does not work. You can search for more bug solutions.

10. If some spacing is required between a group of labels to be nested, leave it to the margin attribute of the label located inside, instead of defining the padding of the label located outside.

11. We recommend that you use background-image instead of list-style-image for the icon in front of the Li label.

12. When absolute positioning is performed, you can use the margin value to locate the position relative to the position of the window. This is different from the top, left, and other attributes. The advantage of absolute positioning is that it allows other elements to ignore its existence.

13. If the text is too long, the excessive part will be changed to the ellipsis: ie5, FF is invalid, but can be hidden. IE6 valid Div style = "width: 120px; Height: 50px; Border: 1px solid blue; overflow: hidden; text-overflow: ellipsis"

14. Table is useful in some aspects. When the content is a data table, do not hate it.

15. Perfect single-pixel external box table (tests can be performed in ie5, IE6, IE7, and ff1.0.4)
Table {border-collapse: collapse;} TD {border: #000 solid 1px ;}

16. The negative value of margin can be used for relative positioning when the label is absolutely positioned. When the page is centered, the left: xxpx attribute is not suitable for the layer with absolute positioning. Place this layer next to a tag to be located, and then use the negative value of margin as a good method.

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.