Introduction to property value inheritance in CSS

This article mainly introduces the property value inheritance in CSS, introduces the inheritance and non-inheritance of the attributes, and analyzes the limitations of inheritance and whether it can be canceled, and so on, the specific operation steps can be seen below detailed explanations, interested in the small partners can refer to.

Inheritance: HTML elements can inherit a subset of CSS properties from the parent element, even if the current element does not have the attribute defined.

1.CSS properties that can and cannot be inherited

Non-inheritable: display, margin, border, padding, background, height, min-height, max-height, Width, min-width, max-width, overflow , position, left, right, top, bottom, z-index, float, clear, table-layout, Vertical-align, Page-break-after, Page-bread-before and Unicode-bidi.
All elements can be inherited: visibility and cursor.
Inline elements can be inherited: Letter-spacing, Word-spacing, White-space, line-height, color, font, font-family, Font-size, Font-style, Font-variant, Font-weight, Text-decoration, Text-transform, direction.
Terminal block elements can be inherited: Text-indent and Text-align.
List elements can be inherited: List-style, List-style-type, List-style-position, List-style-image.
Table elements can be inherited: Border-collapse.

2. Inheritance of values

Inheritance is also based on the document tree, where certain attributes of elements in the document tree can be inherited by their child elements, and each CSS property defines whether it can be inherited. To set some default style properties for a document, you can set the property on the root of the document tree, and if the property can inherit, its descendant elements will inherit this property, such as color, font-size, and so on.

3. "Inherit (inherited)" value

Each property can specify a value of "inherit", that is, the value of the property and the computed value of its parent element's relative property for the given element. An inherited value is usually used only as a fallback value, and it can be enhanced by explicitly specifying "inherit", for example:

p { font-size: inherit; }

4. Limitations of inheritance

While inheritance reduces the hassle of repeating definitions, some properties cannot be inherited, such as border (border), margin (margin), padding (padding), and background.
This setting makes sense, for example, to set a border for a <p>, and if this attribute is inherited, then all the elements in this <p> will have a border, which will undoubtedly produce a dazzling result. Similarly, attributes that affect the position of an element, such as margin (margin) and padding (padding), are not inherited.

Also, the default style of the browser affects the inherited results. For example:

body { font-size: 12px; }

The text of the

This is because the default style of the browser sets the CSS rules for

At the same time, some older browsers may not be able to support inheritance, for example, some browsers will lose all inherited properties when they encounter <table>

5. Can I cancel

Once a CSS property is inherited and cannot be canceled, only the style can be redefined.

6. Case studies

Parent element position:relative child element: Position:absolute the width of the parent element is fixed, and the child element inherits the width of the parent element (important for level two navigation, when the hidden navigation bar width is not fixed, or the width is greater than the parent element. The width of the child element can only be reset at this time)

If you go to a fork, you return; From time to time stop to think, look, pondering, and then continue to walk.