is usually a very small value, after a layer of exaggerated 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 is caused by the lack of in-depth study of the language. In my opinion, CSS is made up of the following three blocks: default, inherit 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. CSS Framework basically has a file called Reset.css, is to reset it, to eliminate the differences between the browser. The inheritance system is the key thing to be discussed below. The weighted system, which is the priority issue, is not in the scope of this discussion. Another, these three things are faced with IE bug attack, the harm is very big, their own break it (laughter).
In CSS, many properties can be inherited, such as the font of a paragraph is set to white, its element font is not set or set to Inhert, it is white. These properties are called the 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.
Here is a list of inherited properties:
Copy CodeThe 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
<textarea id="runcode50086"><!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "gb2312"/> <meta http-equiv= "x-ua-compatible" content= "ie=8" > <style type= "text/css" > </style> <title>css</ title> </pead> <body> Parent element child elements </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
We set the style of the font for the parent element, without setting the child element, and 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. See here and here for details
In the IE8, the text-align of the original inherited property fails in th.
Table, TR, TD, Th {
Border-collapse:collapse;
border:1px solid #000;
}
Table {
Text-align:right;
}
TD, Th {
width:100px;
}
The original th should inherit the text right-aligned settings from the table, but it fails ...
<textarea id="runcode41800"><!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <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> </pead> <bo dy> <table> <tr> <th>Ruby</th> <th>Rouvre</th> </tr> <tr> <td >By</td> <td> Masaki </td> </tr> </table> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
It is also easy to solve IE8 this mentally retarded bug, which is to set Inhert explicitly.
Table, TR, TD, Th {
Border-collapse:collapse;
border:1px solid #000;
}
Table {
Text-align:right;
}
TD, Th {
width:100px;
}
th {
Text-align:inherit;
}
<textarea id="runcode19774"><!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <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;} th {text-align:inherit;} </style> <title>css</ti tle> </pead> <body> <table> <tr> <th>Ruby</th> <th>Rouvre</th> </tr> <tr> <td>By</td> <td> Masaki </td> </tr> </table> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
In addition, there are some CSS properties are not inherited, the 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 relevant good news is that the default value in Firefox can also be specified, so we do not use the Reset style!
Below 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="runcode1285"><!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "Utf-8"/> <meta http-equiv= "x-ua-compatible" content= "ie=8" > <style type= "text/css" > </style> <title>css</ title> </pead> <body> Parent element child elements </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
We set the background color for the parent element, without setting the child element, then we get the default value of the browser transparent (it seems as if the color will be converted to RGB format, the extra alpha)
Http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css http://elizabethcastro.com/html/extras/cssref.html
Then we look at auto, which is a value that is ambiguous but has a length concept. 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, its default value is auto, but it is easily overwritten by the value of the parent element, which implicitly becomes the Inhert. In inline elements, without a box model, if not set, even Firefox would have given it up, which is very detrimental to the precise calculation of the width and height of the element. Auto also has symmetry, which we often apply to it in the center layout. In non-metric attributes, such as overflow, it is necessary to specifically analyze the specific situation.
PS: This article prepares for http://www.jb51.net/article/21718.htm.
