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:

Copy code The code is as follows:

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font- stretch
font-size
font-size-adjust
font-style
font-variant
font-weight
letter-spacing
line-height
list- style
opacity
list-style-image
list-style-type
quotes
text-align
text-indent
text-transform
white-space word-spacing

<meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> </style> <script type="text/javascript"> function getStyle(el, style){ if(!+"\v1"){ style = style.replace(/\-(\w)/g, function(all, letter){ return letter.toUpperCase(); }); return el.currentStyle[style]; }else{ return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) } } var _ = function(id){ return document.getElementById(id); }; window.onload = function(){ alert(getStyle(_("text2"),"color")) } </script><title>CSS</title> <div id="text" style="width:20em;height:140px;background:#8080c0;padding:2px;border:1px solid red;color:#fff">Parent element <div id="text2" style="width:80%;height:4em;background:#b45b3e">Child element</div> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

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...

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> table, tr, td, th { border-collapse: collapse; border: 1px solid #000; } table { text-align: right; } td, th { width: 100px; } </style> <title>CSS</title> <table> <tr> <th>Ruby</th> <th>Rouvre</th> </tr> <tr> <td>By</td> <td>Situ Zhengmei</td> </tr> </table>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

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;
}

Ruby	Rouvre
By	Situ Zhengmei

[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before executing]

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