CSS inherit and auto

A very simple fable, a thousand-year-old tree was struck by lightning and still standing, but was destroyed by the invasion of ants. People who think they are proficient in CSS are often confused by small problems. It is usually a very small value. After layers of amplification and distortion, the entire structure will be out of shape. CSS is a very simple language, easy to learn and use, but it is also the most prone to garbage code. This is due to not studying the language in depth. In my opinion, CSS is composed of the following three blocks: default value, inheritance system and weighted system. The default value is the attribute specified by the browser by default if the user does not set the attribute. The CSS framework basically has a file called reset.css, which resets it to eliminate differences between browsers. The inheritance system is what we will focus on below. The weighting system, that is, the issue of priority, is beyond the scope of this article and will not be discussed further.

In CSS, many properties can be inherited. For example, if the font of a paragraph is set to white, the font of its element does not need to be set or is set to inherit, it will be white. These attributes are called inherited properties. It will get the calculated and converted value of the corresponding attribute from the parent element. If the parent element is in the same situation as it, it will continue to look up, and finally use browse if it is not found. The default value of the device.

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

We give the parent element The font style is set, but the sub-element is not set. When the sub-element is taken out, it is found that its value is converted to rgb format (except IE of course!)

However, in IE7 and previous versions, it is Using inherit to set style attributes other than direction and visibility is not supported. For details, please see here and here

In IE8, text-align, which was originally an inherited property, is invalid in th.

 <table>
  <tr>
    <th>Ruby</th>
    <th>Rouvre</th>
  </tr>
  <tr>
    <td>By</td>
    <td>司徒正美</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 setting from the table, but it failed...

It is also easy to solve this mentally retarded bug in IE8, that is, the display Set inherit in a formula.

 
  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 that cannot be inherited, the most classic ones are the border series. It is called a non-inherited property. If we do not set it, we can only get the browser's default value. The default value is called initial value in Firefox. A related piece of good news is that default values ​​can also be specified in Firefox, so we don't need to reset the style!

The following is a list of non-inherited properties:

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. If we do not set the child element, the browser's default value of transparent will be obtained (W3C seems to only have The color will be converted to rgb format, and the extra a is Alpha)

Then let's look at auto, which is an ambiguous value but has a concept of length. Applies 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 measurable properties of block-level elements (e.g. width, height), if no value is set, its default value is auto, but it can easily be overwritten by the value of the parent element, which means it becomes implicitly inherited. In inline elements, since there is no box model, even Firefox will return it if it is not set, which is very detrimental to accurately calculating the width and height of the element. Auto also has symmetry, which we often use in centered layouts. Among non-metric attributes, such as overflow, specific analysis is required.

• For more articles related to CSS inheritance and auto, please pay attention to the PHP Chinese website!