Controlando a herança do CSS desmistificado: a altura pode se tornar herdável?

Continue a criar, acelere o crescimento! Este é o 5º dia da minha participação no "Nuggets Daily New Plan · June Update Challenge", clique para ver os detalhes do evento .

Controlando a herança do CSS desmistificado: a altura pode se tornar herdável?

1. Escreva na frente

Sabemos que existem propriedades CSS herdáveis ​​e não herdáveis, por exemplo, height e width são propriedades típicas não herdáveis ​​em CSS, e color e font-size são propriedades herdáveis ​​típicas. A propriedade herdável CSS significa que o estilo dos elementos descendentes herdará o estilo dos elementos ancestrais. Por exemplo, se a cor de um elemento pai for vermelha, se o elemento descendente não tiver um valor de cor definido por si mesmo, ele será retirado do valor de cor do elemento pai. Na mesma condição, a propriedade CSS é alterada de cor para altura, por ser uma propriedade não herdável por padrão, seus elementos descendentes não herdarão o valor de altura do elemento pai.

Esta é a diferença entre propriedades de herança e não herança em CSS. A diferença é se um certo tipo de valor de estilo de um elemento será herdado por seus elementos descendentes, ou seja, se o valor de estilo de seus elementos descendentes será obtido de o elemento pai.

Existem três conceitos em CSS que são importantes para entender como o CSS funciona, eles são "cascata", "prioridade" e "herança".

Explicação da Mozilla sobre os conceitos de herança CSS: Em CSS, uma visão geral de cada definição de propriedade CSS indica se a propriedade é herdada por padrão ("Herdado: Sim") ou não ("Herdado: não"). Isso determina como o valor é calculado quando você não especifica um valor para o atributo do elemento.

2. Controle de Herança

CSS fornece quatro valores de propriedades genéricas especiais para controlar a herança. Toda propriedade css recebe esses valores. Isso significa que, assim como o modelo de caixa css, pode ser alterado alterando o valor do tamanho da caixa (border-box e content-box). A herança de propriedades css também pode ser controlada, por exemplo, definindo os valores herdar, inicial, não definido e reverso.

inherit：设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承"。

initial：设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit。

unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。

revert：新的属性，目前仅被很少浏览器支持。
复制代码

1. Ativar herança

height 在 CSS 原生上不可继承属性，子元素不会继承父元素的 height， 但是这种现状是可以改变的，当子孙元素的 height 设置 为 inherit， 该子孙元素就会的 height 值就会取其父元素的 height 值，就像是子元素继承了父元素的高度。

如果你希望子元素的高度一直保持和父元素一直，那么设置子元素的 height 为 inherit，最合适不过了。

inherit：设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承"。这个值可以被几乎 CSS 所有属性 使用，也就是 width 等其他属性也可以开启继承。

下面是一个给子元素的 height 开启继承的示例。

<div>
    <p>这是一个普通的段落</p>
</div>
复制代码

div{
    height: 200px;
    color: red;
    border: 1px solid red;
    font-size: 25px;
}

p{
    border: 1px solid #1e87f0;
    height: inherit; /*开启继承后，自动继承了父元素的高度*/
    margin: 0;
}
复制代码

2.重设几乎所有属性值

all 结合 unset，重置几乎所有样式，这也可以看成是一种对原始继承的控制改变， all 属性，将这种改变的有效范围放大了，因为 unset 几乎可以重置所有属性的值。 这里的重置通常是指将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。

CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个，应用于（几乎）所有属性。 它的值可以是其中任意一个(inherit, initial, unset, or revert)。 这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

例如像下面这样：例子中有两个 div，第一个 div 应用了样式选择器 div 的样式， 第二个通过 类选择器 unset-all 设置 all 为 unset，重置了几乎所有样式。 例如 color、background-color 和 border 都被重置为浏览器默认样式了，原本两个段落的样式应该是一致的。

<div>
    <p>这是一段文字</p>
</div>
<div class="unset-all">
    <p>这是另一段文字，它将被充值样式</p>
</div>
复制代码

div {
    color: red;
    background-color: red;
    border: 2px solid green;
}

.unset-all {
    all: unset;
}
复制代码

下面是一张测试样式重置的效果图

三、拓展：常见继承属性与非继承属性

1.常见可继承属性

• ul
• li
• dl
• dd
• dt
• color
• font-size
• font-family

2.常见不可继承属性

• width
• border
• margem
• altura
• preenchimento

Quarto, escreva atrás

Assim, definindo o valor da altura do elemento filho para herdar, você pode herdar a altura do elemento pai, o que fará com que a altura do elemento filho seja sempre a mesma, o que às vezes é conveniente. Obviamente, a maioria das propriedades, como largura, pode ser herdada dessa maneira.