This time I will show you how to use attribute value inheritance in CSS, and what are the precautions for using attribute value inheritance in CSS. The following is a practical case, let's take a look.
Inheritance: HTML elements can inherit some css attributes from their parent elements, even if the current element does not define this attribute.
1.css attributes 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 inherit: visibility and cursor.
Inline elements can inherit: 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 inherit: text-indent and text-align.
List elements can inherit: list-style, list-style-type, list-style-position, list-style-image.
Table elements can be inherited: border-collapse.
2. Value inheritance
Inheritance is also based on the document tree. Certain attributes of elements in the document tree can be inherited by their child elements. Each CSS properties define whether it can be inherited. To set some default style attributes of the document, you can set this attribute at the root of the document tree. If this attribute can be inherited, its descendant elements will inherit this attribute, such as color, font-size and other attributes.
3. "inherit (inherit)" value
Each attribute can specify the value "inherit", that is: for a given element, this attribute and its The calculated value of the relative attribute of the parent element takes the same value. Inherited values are usually used only as fallback values, which can be enhanced by explicitly specifying "inherit", for example:
##4. Limitations of inheritanceAlthough inheritance reduces the trouble of repeated definitions, some properties cannot be inherited, such as border, margin, padding (filler) and background, etc.
, if this attribute is also inherited, then all elements within this
will have borders, which 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; }
// H2 Chinese text will be Title 2 style text instead of 12px size text. This is because the browser’s default style sets the CSS rule of
At the same time, some older versions of browsers may not support inheritance very well. For example, some browsers will lose all inherited attributes when encountering
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
