I
A very shallow fable, the millennium old tree, electricity hit the thunder, standing down, but destroyed by the invasion of the ant. People who think they are proficient in CSS are often dizzy with small problems. It is usually a small value
After the layer-by-layer amplification and distortion, the entire layout will be distorted. CSS is a simple language that is easy to learn and use, but also the easiest way to get spam code. This is because we have not studied this language in depth. In my opinion, CSS is composed
The default value is system and weighted system. Default value, that is, the default attribute specified by the browser when the user does not set the attribute. The cssframe has a file named reset.css, Which is reset to eliminate the differences between browsers. Inheritance systems are the things to be discussed below. The weighted system, that is, the priority issue, is not discussed in this article. In addition, these three things all face the attack of IE bug, which is very harmful. Let's take a break (Laugh ).
In CSS, many attributes can be inherited. For example, if the font of a paragraph is set to white, the font of the element does not need to be set or set to inhert. It is white. These attributes are calledInherited property
It will obtain the corresponding attribute from the parent element after calculation
And conversion
Value (computed value
), If the parent element is the same as the parent element, it will continue to look up and use the default value of the browser if no parent element exists.
The following is a list of inherited properties:
Http://reference.sitepoint.com/css/inheritvalue
<! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> function getstyle (El, style) {<br/> If (! + "/V1") {<br/> style = style. replace (//-(/W)/g, function (all, letter) {<br/> return letter. touppercase (); <br/>}); <br/> return el. currentstyle [style]; <br/>}else {<br/> return document. defaultview. getcomputedstyle (El, null ). getpropertyvalue (style) <br/>}< br/> VaR _ = function (ID) {<br/> return document. getelementbyid (ID); <br/>}; <br/> window. onload = function () {<br/> alert (getstyle (_ ("text2"), "color ")) <br/>}< br/> </SCRIPT> <br/> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Div id = "text" style = "width: 20em; Height: 140px; Background: #8080c0; padding: 2px; Border: 1px solid red; color: # fff "> parent element <br/> <Div id =" text2 "style =" width: 80%; Height: 4em; Background: # b45b3e "> child element </div> <br/> </body> <br/> </ptml> <br/>
Run code
We have set a font style for the parent element. If no child element is set, the value of the child element is converted to the RGB format when the child element is retrieved (except IE !)
However, in IE7 and earlier versions, you cannot use inhert to set style attributes other than ction and visibility. For details, see here
And here
In IE8, text-align of inherited property is invalid in th.
01.
<
table
>
02.
<
tr
>
03.
<
th
>Ruby</
th
>
04.
<
th
>Rouvre</
th
>
05.
</
tr
>
06.
<
tr
>
07.
<
td
>By</
td
>
08.
<
td
> Situ zhengmei </
td
>
09.
</
tr
>
10.
</
table
>
01.
table, tr, td, th {
02.
border-collapse
:
collapse
;
03.
border
:
1px
solid
#000
;
04.
}
05.
table {
06.
text-align
:
right
;
07.
}
08.
td, th {
09.
width
:
100px
;
10.
}
Originally, th should inherit the right-aligned text settings from the table, but it is invalid ......
<! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> table, tr, TD, Th {<br/> border-collapse: collapse; <br/> border: 1px solid #000; <br/>}< br/> table {<br/> text-align: Right; <br/>}< br/> TD, Th {<br/> width: 100px; <br/>}< br/> </style> <br/> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Table> <br/> <tr> <br/> <TH> ruby </Th> <br/> <TH> rouvre </Th> <br /> </tr> <br/> <TD> by </TD> <br/> <TD> situ zhengmei </TD> <br /> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
Run code
It is also easy to solve IE8's mental retardation bug, that is, to explicitly set inhert.
01.
table, tr, td, th {
02.
border-collapse
:
collapse
;
03.
border
:
1px
solid
#000
;
04.
}
05.
table {
06.
text-align
:
right
;
07.
}
08.
td, th {
09.
width
:
100px
;
10.
}
11.
th {
12.
text-align
: inherit;
13.
}
<! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> table, tr, TD, Th {<br/> border-collapse: collapse; <br/> border: 1px solid #000; <br/>}< br/> table {<br/> text-align: Right; <br/>}< br/> TD, Th {<br/> width: 100px; <br/>}< br/> Th {<br/> text-align: Inherit; <br/>}< br/> </style> <br/> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Table> <br/> <tr> <br/> <TH> ruby </Th> <br/> <TH> rouvre </Th> <br /> </tr> <br/> <TD> by </TD> <br/> <TD> situ zhengmei </TD> <br /> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
Run code
In addition, some CSS attributes cannot be inherited. The most classic type is the border series. It is calledNon-inherited property
If we do not set it, we can only get the default value of the browser. The default value is called initial value in Firefox. The good news is that the default value can be specified in Firefox, so we don't need to reset the style!
The following is a list of non-inherited property:
<! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"> <br/> <style type = "text/CSS"> <br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> function getstyle (El, style) {<br/> If (! + "/V1") {<br/> style = style. replace (//-(/W)/g, function (all, letter) {<br/> return letter. touppercase (); <br/>}); <br/> return el. currentstyle [style]; <br/>}else {<br/> return document. defaultview. getcomputedstyle (El, null ). getpropertyvalue (style) <br/>}< br/> VaR _ = function (ID) {<br/> return document. getelementbyid (ID); <br/>}; <br/> window. onload = function () {<br/> alert (getstyle (_ ("text2"), "background-color ")) <br/>}< br/> </SCRIPT> <br/> <title> CSS </title> <br/> </pead> <br/> <body> <br/> <Div id = "text" style = "width: 20em; Height: 140px; Background: #8080c0; padding: 2px; Border: 1px solid red; color: # fff "> parent element <br/> <Div id =" text2 "style =" width: 80%; Height: 4em; color: # b45b3e "> child element </div> <br/> </body> <br/> </ptml> <br/>
Run code
If the background color is set for the parent element without the child element, the browser's default value transparent will be obtained (the W3C side seems to be converted to the RGB format as long as it is a color, the excess A is Alpha)
Http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
Http://elizabethcastro.com/html/extras/cssref.html
Next let's look at auto, which is a vague but length value. Applies to the following attributes:
In measurable attributes of block-level elements (such as width and height), if no value is set, the default value is auto, but it is easily overwritten by the value of the parent element, that is, implicitly
For inhert. Because the inner element does not have a box model, if it is not set, Firefox will return the box to it, which is very unfavorable for Precise Calculation of the width and height of the element. Auto return
Symmetry, which is often used in center la S. In non-measure attributes, for example, overflow, we need to analyze the specific situation.
PS: This article is for another article. Please wait ..............................
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
