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

• //m.sbmmt.com/

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

 
  table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  table {
    text-align: right;
  }
  td, th {
    width: 100px;
  }
  th {
    text-align: inherit;
  }

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