Style sheet CSS layout experience_CSS/HTML-CSS Tutorial-php.cn

As time goes by, the content here will be added or modified. I hope that the following things will be helpful or useless to future standard learners.

The main content is the differences and easily overlooked details between IE and MOZILLA, the best implementation methods of some classic applications, and the mistakes that should be avoided.

Since it is the accumulation of my daily experience, it is inevitable that there will be some wrong explanations. If you are lucky enough to be seen by an expert, please be sure to point it out. Thanks in advance.

The ul tag has a padding value by default in Mozilla, but in IE only margin has a value.

The same class selector can appear repeatedly in a document, but the id selector can only appear once; use both class and id to define a label in CSS. If the definitions are repeated, the id selector will be used. Valid.

A stupid way to adjust compatibility (IE and Mozilla):

Beginners may encounter such a situation: the attribute of the same label is displayed normally when it is set to A in IE, but must be set to B in Mozilla to display normally, or the two are reversed.

Temporary solution:

Selector {Attribute name: B !important; Attribute name: A;}

If some spacing is required between a group of nested tags, leave it to the margin attribute of the tag located inside instead of defining the padding

of the tag located outside.

It is recommended to use background-image instead of list-style-image for the icon in front of the li tag

IE can’t tell the difference between inheritance relationship and father-son relationship, they are all inheritance relationships.

When you are adding selectors to your tags, don’t forget to comment the selectors in CSS. You will know why you do this when you modify your CSS in the future.

If you set a dark background image and bright text effect for a label, it is recommended to set a dark background color for your label at this time.

Pay attention to the order when defining the four states of a link: Link Visited Hover Active

Please use background

for pictures that have nothing to do with the content.

The defined color can be abbreviated #8899FF = #89F

Table performs much better than other tags in some aspects. Please use it where column alignment is required