Some interesting CSS questions (15th) -- about CSS keywords initial, inherit and unset, inheritunset

Some interesting CSS questions (15th) -- about CSS keywords initial, inherit and unset, inheritunset

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines

Some interesting CSS questions (10) -- structural pseudo-class selector

Some interesting CSS questions (11) -- reset.css

Some interesting CSS questions (12) -- In-depth discussion of CSS Feature Detection @ supports and Modernizr

Let's talk about some interesting CSS questions (13)-cleverly create a background color gradient animation!

Some interesting CSS questions (14) -- pause and play CSS animation in pure CSS mode!

All questions are summarized in my Github.

The text starts from here.

I often encounter a CSS attribute, suchpositionThe value.

The general answer is:static,relative,absoluteAndfixed. Of course, there is also a raresticky. In fact, you can set the following values for CSS attributes:

• initial
• inherit
• unset
• revert

{  position: initial;  position: inherit;  position: unset  /* CSS Cascading and Inheritance Level 4 */  position: revert;}

Understanding the initial (default), inherit (inheritance), and unset of CSS styles is the key to Skillful Use of CSS. (Of course, this article does not mention revert as it is not included in the specification .)

 

Initial

initialThe keyword is used to set the CSS attribute as its default value and can act on any CSS style. (IE does not support this keyword)

 

Inherit

Each CSS attribute has a feature that must be inherited by default (inherited: Yes) Or not inherited by default (inherited: no) One of them, we can use this index search on the MDN to determine whether an attribute inherits the feature.

For examplebackground-colorFor example, it indicates that it does not inheritbackground-color:

Property that can be inherited

The default value isinherited: YesProperties:

• 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, and direction
• 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 element inheritance: border-collapse

There are also some amazing inherit usage. Let's take a look at this: Let's talk about some interesting CSS questions (4)-from reflection, let's talk about how CSS inherits inherit, the rational use of inherit can make our CSS code more in line with the DRY (Don't Repeat Yourself) principle.

 

Unset

Name as expected,unsetKeyword is not set. Actually, it is a keywordinitialAndinherit.

What does it mean? That is, when we set a CSS attributeunsetStatement:

For example, we will first list some attributes in CSS that inherit the parent style by default:

• Partially inherited styles:font-size,font-family,color,text-indent
• Some styles cannot be inherited:border,padding,margin,width,height

Use unsetInherit the parent style:

Take a look at the following simple structure:

<Div class = "father"> <div class = "children"> child level element 1 </div> <div class = "children unset"> child level element 2 </div> </div>

.father {    color: red;    border: 1px solid black;}.children {    color: green;    border: 1px solid blue;}.unset {    color: unset;    border: unset;}

CodePen Demo -- unset Demo;

 

unsetSome useful

For example, in the following case, there are two similar structures on our page.position: fixedPositioning element.

The difference is that one of them istop:0; left: 0;And the other istop:0; right: 0;. Other styles are the same.

Assume that the style structure is as follows:

<div class="container">    <div class="left">fixed-left</div>    <div class="right">fixed-right</div></div>

Generally, the style is as follows:

.left,.right {    position: fixed;    top: 0;        ...}.left {    left: 0;}.right {    right: 0;}

Use unset:

.left,.right {    position: fixed;    top: 0;        left: 0;    ...}.right {    left: unset;    right: 0;}

CodePen Demo -- unset Demo;

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.