Usually a very small number, after a layer of amplification distortion, the entire layout is shape. CSS is a very simple language, easy to learn and easy to use, but also the most easily out of the garbage code. This was not the result of a thorough study of the language. In my opinion, CSS is composed of the following three blocks: Default value, inheritance system and weighted system. The default value, which is the default property specified by the browser when the user does not have a property set. The CSS framework basically has a file called Reset.css, which is reset to eliminate the differences between browsers. The inheritance system is the next thing to focus on. The weighted system, which is the priority problem, is not discussed in this article. Another, these three things are facing IE bug attack, the harm is very big, oneself separate to break (laugh).
In CSS, many properties can be inherited, such as the font of a paragraph is set to white, the font of its elements is not set or set to Inhert, it is white. These properties are called inherited property, which gets the computed and converted value of the corresponding property from the parent element (computed value), and if the parent element is the same as its case, it continues to look up, and the default value of the browser is not used at the end.
The following is a list of inherited properties:
Copy Code code 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
<textarea id="runcode32206"><!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "gb2312"/> <meta ht tp-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) {RET Urn Letter.touppercase (); }); return El.currentstyle[style]; }else{return Document.defaultView.getComputedStyle (EL, null). GetPropertyValue (Style)}} var _ = function (id) {retur n document.getElementById (ID); }; Window.onload = function () {Alert (GetStyle (_ ("Text2"), "Color")} </script> <title>CSS</title> ;/head> <body> <div id = "text" > Parent element <div id= "Text2" > Child elements </div> </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
We set the style of the font for the parent element, without setting the child element, when the child element is taken out, the value is converted to RGB format (except IE!)
However, in IE7 and its previous versions, it is not supported to use Inhert to set style properties other than direction and visibility. Specific can be seen here with here
In IE8, the original inherited property of the text-align in th failure.
<table>
<tr>
<th>Ruby</th>
<th>Rouvre</th>
</tr>
<tr>
<td>By</td>
<td> Masaki </td>
</tr>
</table>
Table, TR, TD, Th {
Border-collapse:collapse;
border:1px solid #000;
}
Table {
Text-align:right;
}
TD, Th {
width:100px;
}
Originally th should inherit the text to the right of the setting from table, but failed ...
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "Utf-8"/> <meta http-equ iv= "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> </pead> <body> <table> <tr> <th>ruby& lt;/th> <th>Rouvre</th> </tr> <tr> <td>By</td> <td> Masaki </td> < /tr> </table> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
It is also easy to solve the IE8 bug, which is to explicitly set the Inhert.
Table, TR, TD, Th {
Border-collapse:collapse;
border:1px solid #000;
}
Table {
Text-align:right;
}
TD, Th {
width:100px;
}
th {
Text-align:inherit;
}
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "Utf-8"/> <meta http-equ iv= "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; } th {Text-align:inherit; } </style> <title>CSS</title> </pead> <body> <table> <tr> <th>ruby& lt;/th> <th>Rouvre</th> </tr> <tr> <td>By</td> <td> Masaki </td> < /tr> </table> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In addition, some CSS attributes are not inherited, most classic such as the Border series. It is called the Non-inherited property, if we do not set it, we can only get the default value of the browser, the default value in Firefox is called initial value. A related good news is that the default value in Firefox can also be specified, so we do not have to reset the style!
The following is a list of non-inherited property:
Background
Border
Bottom
Clear
Display
Float
Height
Left
Margin
Outline
Overflow
Padding
Position
Right
Top
Visibility
Width
Z-index
<textarea id="runcode41415"><!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "Utf-8"/> <meta ht tp-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) {RET Urn Letter.touppercase (); }); return El.currentstyle[style]; }else{return Document.defaultView.getComputedStyle (EL, null). GetPropertyValue (Style)}} var _ = function (id) {retur n document.getElementById (ID); }; Window.onload = function () {Alert (GetStyle (_ ("Text2"), "Background-color")} </script> <title>css</ Title> </pead> <body> <div id = "text" > Parent element <div id= "Text2" > Child elements </div> </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
We set the background color for the parent element, and then we get the default value of the browser transparent (the side of the consortium seems to be converted to RGB as long as it's color).
Http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css http://elizabethcastro.com/html/extras/cssref.html
And then we look at auto, which is a vague but long concept of value. Apply to the following properties:
Overflow
Cursor
Height
Width
Marker-offset
Margin
margin-* (Left|bottom|top|right|start|end)
Top
Bottom
Left
Right
Table-layout
Z-index
-moz-column-width
Languages
In a measurable attribute of a block-level element (such as width,height), if the value is not set, the default value is auto, but it is easily overwritten by the value of the parent element, which implicitly becomes the Inhert. In inline elements, because the box model is not available, if it is not set, even if the Firefox is also originally to be, this is very bad for the precise calculation of the width and height of the element. Auto also has symmetry, which we often use in the center layout. In non metric attributes, such as overflow, it is necessary to specifically analyze the situation.
PS: This article prepares for http://www.jb51.net/article/21718.htm.
