CSS inherit and auto usage analysis_Experience exchange

It is usually a very small value. After layers of amplification and distortion, the entire structure will be out of shape. CSS is a very simple language, easy to learn and use, but it is also the most prone to garbage code. This is due to not studying the language in depth. In my opinion, CSS is composed of the following three blocks: default value, inheritance system and weighted system. The default value is the attribute specified by the browser by default if the user does not set the attribute. The CSS framework basically has a file called reset.css, which is used to reset it and eliminate the differences between browsers. The inheritance system is what we will focus on below. The weighting system, that is, the issue of priority, is beyond the scope of this article and will not be discussed further. In addition, these three things are all facing the invasion of IE Bug, which is very harmful, so you should stop it yourself (laughs).

In CSS, many properties can be inherited. For example, if the font of a certain paragraph is set to white, the font of its element does not need to be set or is set to inherit, it will be white. These attributes are called inherited properties. It will get the calculated and converted value of the corresponding attribute from the parent element. If the parent element is in the same situation as it, it will continue to look up, and finally use browse if it is not found. The default value of the device.

The following is a list of inherited properties:

We set the font style for the parent element but not the child element. When we took out the child element, we found that its value was converted to rgb format (except for IE of course!)
However, in IE7 and before The version does not support using inherit to set style attributes other than direction and visibility. For details, please see here and here
In IE8, text-align, which was originally an inherited property, is invalid in th.

Ruby	Rouvre
By	Situ Zhengmei

table, tr, td, th {
border- collapse: collapse;
border: 1px solid #000;
}
table {
text-align: right;
}
td, th {
width: 100px;
}
Originally th should inherit the right-aligned text setting from the table, but it failed...

It is also easy to solve this mentally retarded bug in IE8, which is to explicitly set inherit.
table, tr, td, th {
border-collapse: collapse;
border: 1px solid #000;
}
table {
text-align: right;
}
td, th {
width: 100px;
}
th {
text-align: inherit;
}

In addition, there are some CSS properties that cannot be inherited, the most classic ones are the border series . It is called a non-inherited property. If we do not set it, we can only get the browser's default value. The default value is called initial value in Firefox. A related piece of good news is that default values