Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the knowledge points inherited by CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Whether the property inherits by default or not

The initial value refers to the default value when the property does not specify a value, for example, the values of these statements are all default values: background-color: transparent, left: auto, float: none, width: auto, and so on.

Css inheritance is simple, divided into default inheritance and default non-inheritance, but all properties can be inherited by setting inherit.

When no value is specified, the default inherited attribute takes the calculated value of the same attribute of the parent element (equivalent to setting inherit), and the default non-inherited attribute takes the initial value of the attribute (equivalent to setting initial).

Properties of ("Inherited: Yes") inherited by default:

All elements inherit by default: visibility, cursor

Inline elements inherit by default: 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

Block elements inherit by default: text-indent, text-align

List elements inherit by default: list-style, list-style-type, list-style-position, list-style-image

Default inheritance of table elements: border-collapse

Properties of ("Inherited: No") that are not inherited by default:

Text attributes are not inherited by default: vertical-align, text-decoration, text-shadow, white-space, unicode-bidi

Box properties are not inherited by default: display, width, height, padding, margin, border, min-width, min-height, max-width, max-height, overflow, clip

Background attributes are not inherited by default: background, background-color, background-image, background-repeat, background-position, background-attachment

Location attributes are not inherited by default: float, clear, position, top, right, bottom, left, z-index

Content attributes are not inherited by default: content, counter-reset, counter-increment

Profile attributes are not inherited by default: outline-style, outline-width, outline-color, outline

Page properties are not inherited by default: size, page-break-before, page-break-after

Sound attributes are not inherited by default: pause-before, pause-after, pause, cue-before, cue-after, cue, play-during

You can see that the attributes related to the text are inherited by default. After all, css was designed to better render text on the web page.

It is important to note that the default values of some attributes are calculated based on the value of the element's display attribute, such as the vertical-align attribute, which is baseline aligned vertical-align: baseline in the case of a display: inline element, and vertical-align: bottom in the case of a display: inline-block element.

Common property values initial, inherit, and unset

Css provides four special general property values for control inheritance (the property revert has very little browser support, so it's actually three), and each css property can use these values.

Inherit

Setting this attribute makes the child element attribute the same as the parent element. In fact, it is to "turn on inheritance".

Initial

Apply the initial value of the attribute to the element. In fact, it is "reset to the default value".

Unset

Reset the property to its natural value, that is, if the property is inherited naturally, it is inherit, otherwise it is the same as initial.

Case study

These generic property values can be used in many ways, such as a chestnut:

Use inherit to achieve the following image reflection:

Div::after {

Content: ""

Position: absolute

Top: 100%

Left: 0

Right: 0

Bottom:-100%

Background-image: inherit; / / background image inheritance, which most people do not expect.

Transform: rotateX (180deg)

}

Using initial to reset left to the default value auto: address

Div {

Position: absolute

Left: 20px

Top: 20px

}

Div + div {

Left: initial

Right: 20px

}

In the example, div has set left. For the right of div2 to take effect, you must reset left to the initial value initial (or unset).

Use unset to reset the property to the value before it was set: address

In the example, the color of the p tag is the default inheritance attribute, so color: unset is equivalent to color: inherit at this time. The border attribute of the p tag does not inherit the attribute by default, so border: unset is equivalent to border: initial at this time.

Unset {

Border: unset

Color: unset

}

This is the end of the content of "what are the knowledge points inherited by CSS"? thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.