CSS Learning notes: ID and class, padding and margin, min-height, and height

Core Tip: first understand the pros and cons of IDs and class. So that they can be used according to their own characteristics.

　　Which one do you want to use for ID and class?

The first thing to understand is the pros and cons of IDs and class. So that they can be used according to their own characteristics.

Advantages of ID (class disadvantage): ID is written in CSS with "#" Selector, class is written in CSS with "." Selector. The "#" selector has precedence over "." The selector is about 10 times times, so when you need to raise the priority, the ID tag, or the label inside the ID container, will be easy and effective. The class label, or the label within the class container, may cause the priority elevation to fail.

The disadvantage of ID (the advantage of Class): ID should be unique, so its reusability is very poor, and class can be reused. So if a piece of stuff is more than one page, and even a page is used multiple times, be sure to use class as the style selector. ID is unique, when the ID of a control is generated is not controllable, then the ID selector will be meaningless, but any one control even if it is dynamically generated, his cssclass is still customizable, so when your label needs to use the server-side control instead, The ID of the server-side control is indeterminate, then use the class selector so that you can simply set the server-side control's CssClass to the name of your class selector. (Of course, this also requires a lot of experience accumulation, the project to do more will gradually improve)

　　which one is padding and margin going to use?

Padding and margin can make an area look exactly the same. So many people may think that padding and margin can be interchangeable. In fact, they are very different, and choose which one needs serious and careful consideration. I think the principle of using the padding or the label in the container is to use the margin: when hiding the container or the label inside the container (in fact, you often need to hide and display a part in the actual project), the least effect on the overall layout is beneficial.

For padding: Ie6,ie7 (FF) has a different parsing of the width of the label with the padding style. The label width of the IE6 does not contain padding-left and padding-right values, while IE7 and FF are included. For example, a div's width setting 100px,padding to 10px, while in IE6 it occupies a width of 120px (contains 10 padding-left and 10 padding-right), In IE7 and FF, the width of the 100px is occupied. Because IE7 and FF will think 100 already contains 20px padding.

　　Min-height and Height

If you only need to be compatible with IE6 then you don't have to pay attention to min-height this style because IE6 doesn't support this style at all. But when your page needs to take care of IE7 and FF, this style must be noted. Because many of the height= fixed values are set under the IE6, the IE7 and FF are not adaptive heights when the container is more than the height of the contents. Which leads to the confusion of the layout. To be able to adapt to heights in both IE6,IE7 and FF, the correct approach is to set up min-height and set the height with Csshack. For example:

.52css.com] min-height:600px;
_height:600px;

In this way, when there is very little in the container, it shows a fixed height of 600px, but when there are a lot of things, it will adapt to the growth height.

For the height of the setting must pay special attention to, if it is the layout of the container height requires special attention, otherwise in the FF will not be able to float, so that the layout confusion.