The so-called inheritance means that the html element can inherit some css attributes from the parent element, even if the current element does not define this attribute. So, which properties of CSS can be inherited and which properties cannot be inherited? Let's take a look at the content of attribute inheritance in CSS.
First let’s take a look at the css priority:
Commonly used css non-inheritable attributes
display: Specifies the type of box that the element should generatetext-decoration: Specifies the box type added to the text Decorationtext-shadow: text shadow effectwhite-space: processing of blank charactersAttributes of the box model: width, height, margin, border, paddingBackground attributes: backgroundPositioning attributes: float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip , z-indexCommonly used css inheritable attributes:
font: combined fontfont-family: the font family of the specified elementfont-weight: Set the thickness of the font font-size: Set the size of the font font-style: Define the style of the font text-indent : Text indent text-align: Text horizontal alignment line-height: Line height color: Text color visibility: Element visibility Cursor attribute: cursorAll elements can inherit
1. Element visibility: visibility2. Cursor attribute ：cursorAttributes that can be inherited by inline elements
1, font family attributes2, except text-indent and text-align Text series attributesBlock-level elements can inherit attributes
text-indent, text-aligninherit( Inherit) value
Each attribute can be assigned a value of "inherit", that is: for a given element, the attribute takes the same value as the calculated value of the relative attribute of its parent element. Inherited values are usually used only as fallback values, which can be enhanced by explicitly specifying "inherit", for example: p { font-size: inherit; }inherit Limitations
Although inheritance reduces the trouble of repeated definitions, some properties cannot be inherited, such as border, margin, padding, and background. This setting makes sense. For example, if a border is set for a, if this attribute is also inherited, then all elements within this
will have a border. This It will undoubtedly produce a dazzling result. Likewise, properties that affect element position, such as margin and padding, are not inherited.
At the same time, the browser's default style also affects the inheritance results. For example:
body { font-size: 12px; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
