CSS learning notes (updating ...)

Source: Internet
Author: User
Which of the following is ID and class used?

First, you must understand the advantages and disadvantages of ID and class. In this way, they can be used according to their respective characteristics.
Advantages of ID (disadvantages of class): ID is written in CSS with "#" selector, and class is written in CSS with "." selector. "#" The selector has a higher priority ". "selector is about 10 times, so when you need to increase the priority, the ID tag, or the tag in the ID container will be very easy and effective. But the class label or the class container label may cause the escalation of priority to fail.

Disadvantages of ID (advantages of class): ID should be unique, so its reusability is very poor, while class can be reused. Therefore, if a piece of things has multiple pages and even a page is used multiple times, you must use class as the style selector. ID is unique. When the ID of a control is uncontrollable, the ID selector will lose its meaning, but any control is dynamically generated, its cssclass is still customizable, so when your tag needs to be replaced by a server-side control, and the ID of the server-side control is uncertain, use the class selector, in this way, you only need to set the cssclass of the server control as the name of the class selector. (Of course, this requires a lot of experience, and the project will be gradually improved when it is done too much) 

 

Which one does padding and margin use?

Padding and margin can make the appearance of an area display completely the same. So it may make many people think that padding and margin are interchangeable. In fact, they are very different, and you need to carefully consider which one you choose. I think the principle of using padding for containers or using margin for labels in containers is as follows: when hiding the labels in the container or container (a certain part needs to be hidden and displayed frequently in real projects), This will minimize the impact on the overall layout.

For padding, IE6 and IE7 (FF) do not parse the width of the label with the padding style. The label width of IE6 does not contain the values of padding-left and padding-right, while that of IE7 and FF is. For example, if the width of a div is set to 100px and the padding is set to 10px, the width occupied by the DIV in IE6 is 120px (including 10 padding-left and 10 padding-right ), IE7 and FF occupy a width of PX. Because IE7 and FF will think that 100 already contains 20 PX padding. 

 

Min-height and height

If you only need to be compatible with IE6, you do not need to pay attention to the Min-height style, because IE6 does not support this style at all. However, when you need to take care of IE7 and FF, you must pay attention to this style. Because many styles with a fixed value of Height = are configured in IE6, IE7 and FF do not adapt to the height when the container is held above the height. This leads to layout confusion. To adapt the height to IE6, IE7, and FF, set Min-height and csshack. For example:
Min-Height: 600px;
_ Height: 600px;
In this way, when there are few items in the container, it shows a fixed height of PX, but when there are many items in it, it will also automatically increase the height.

You must pay special attention to the height setting. If it is the height of the container used for layout, you must pay special attention to it. Otherwise, it will not be able to float in FF, causing layout confusion. 

 

 

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.