Inherit and auto of CSS

A very shallow fable, thousand old trees, electric thunder hack, stand not down, but destroyed by the invasion of ants. People who think they are proficient in CSS often get dizzy and bloated with small problems. 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.

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:

• 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://www.php.cn/

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

The original th should inherit the text right-aligned settings from the table, but it fails ...

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

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

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)

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.