CSS inherit and auto

Source: Internet
Author: User
Tags css inherit

A very shallow fable, the millennium old tree, the electricity hit the thunder, can not stand down, but is 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 very small value. After the layer-by-layer amplification and distortion, the entire layout is distorted. CSS is a simple language that is easy to learn and use, but also the easiest way to get rid of spam.Code. This is because we have not studied this language in depth. In my opinion, CSS consists of the following three parts: Default Value, inherited system and weighted system. Default value, that is, the default attribute specified by the browser when the user does not set the attribute. The css framework basically has a reset. CSS files are 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 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 propertyIt will get the corresponding attributes from the parent ElementComputingAndConversionValue (computed value). If the parent element is in the same situation as it, it will continue to look up. If not, it will use the default value of the browser.

The following is a list of inherited properties:

    • 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

Http://reference.sitepoint.com/css/inheritvalue

<Br/> <! 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> </P> <p> <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 more information, see here and here.

In IE8, text-align of inherited property is invalid in th.

 
<Table> <tr> <TH> ruby </Th> <TH> rouvre </Th> </tr> <TD> by </TD> <TD> situ zhengmei </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 right-aligned text settings from the table, but it is invalid ......

<Br/> <! 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.

 
Table, TR, TD, Th {border-collapse: collapse; Border: 1px solid #000 ;}table {text-align: Right ;}td, Th {width: 100px ;} th {text-align: Inherit ;}

<Br/> <! 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 propertyIf 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:

    • Background
    • Border
    • Bottom
    • Clear
    • Display
    • Float
    • Height
    • Left
    • Margin
    • Outline
    • Overflow
    • Padding
    • Position
    • Right
    • Top
    • Visibility
    • Width
    • Z-Index

<Br/> <! 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> </P> <p> <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:

    • 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
    • Ages

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, it is implicitly converted to 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 also has symmetry, which we often use in the center layout. In non-measure attributes, for example, overflow, we need to analyze the specific situation.

PS: This is another articleArticlePreparation. Please wait ..............................

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.