Style sheet CSS layout experience_CSS/HTML

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

<script>There is no language attribute, it should be written like this:<BR><script type="text/javascript"></script>

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

title content

is changed to

title content< ;/span>

Perfect single-pixel outline table

table {border-collapse:collapse;}
td {border:#000 solid 1px;}

Negative margin values ​​can play a role in relative positioning when the label uses absolute positioning. When the page is centered, the layer using absolute positioning is not suitable for using the left:XXpx attribute. Put this layer in a relative position. Next to the positioned label, it is a good idea to use a negative value for margin.

When using absolute positioning, the margin value can be used to position relative to its own position, which is different from the positioning of attributes such as top and left relative to the edge of the window. The advantage of absolute positioning is that other elements can ignore its existence.