Style Sheet CSS layout experience

With the accumulation of time, the content here will increase or be modified. I hope the following things will be helpful or useless to standard learners.

The main content is the differences between IE and Mozilla and the details that are easy to ignore. The best implementation methods of some classic applications should avoid the violation errors.

Due to the accumulation of your usual experience, some incorrect explanations are inevitable. If you are lucky enough to be seen by others, please be sure to point it out and thank you first.

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

The same class selector can be repeated in a document, but the ID selector can only appear once. CSS is used for defining a label with both Class and ID. if the definition is repeated, the definition of ID selector is valid.

A stupid way to adjust compatibility (ie and Mozilla:

A beginner may encounter this situation: it is normal to set the attribute of the same tag to a for display in IE, and B for display in Mozilla, or two for display.

Temporary solution:

Selector {property name: B! Important; attribute name: ;}

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.

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

IE cannot tell the differences between the inheritance relationship and the parent-child relationship. All are inheritance relationships.

Don't forget to add a comment to the selection character in CSS when adding a keyword to your tag. You will know why to do so when you modify your CSS later.

If you have set a deep background image and a bright text effect for a label, we recommend that you set a deep background color for the label at this time.

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

Use background for images unrelated to content

Color can be abbreviated as # 8899ff = # 89f

Table performs better in some ways than other labels. Use it where column alignment is required.

<SCRIPT> the language attribute is not available. It should be written as follows:
<SCRIPT type = "text/JavaScript">

The title is the title, and the text of the title is the text of the title. sometimes the title does not need to display text, so:

Perfect single-pixel box line table

Table {border-collapse: collapse ;}
TD {border: #000 solid 1px ;}

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.

When absolute positioning, 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 can be ignored by other elements.