Control de la herencia de CSS desmitificado: ¿Puede la altura volverse hereditaria?

¡Continúe creando, acelere el crecimiento! Este es el quinto día de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de junio", haga clic para ver los detalles del evento .

Control de la herencia de CSS desmitificado: ¿Puede la altura volverse hereditaria?

1. Escribe al frente

Sabemos que hay propiedades CSS heredables y no heredables. Por ejemplo, la altura y el ancho son propiedades típicas no heredables en CSS, y el color y el tamaño de fuente son propiedades heredables típicas. La propiedad heredable de CSS significa que el estilo de los elementos descendientes heredará el estilo de los elementos antecesores. Por ejemplo, si el color de un elemento principal es rojo, entonces si su elemento descendiente no tiene un valor de color establecido por sí mismo, será tomado del valor de color del elemento principal. En la misma condición, la propiedad CSS cambia de color a altura. Dado que es una propiedad no heredable por defecto, sus elementos descendientes no heredarán el valor de altura del elemento principal.

Esta es la diferencia entre las propiedades de herencia y no herencia en CSS. La diferencia es si un cierto tipo de valor de estilo de un elemento será heredado por sus elementos descendientes, es decir, si el valor de estilo de sus elementos descendientes será tomado de el elemento padre.

Hay tres conceptos en CSS que son importantes para entender cómo funciona CSS, son "cascada", "prioridad" y "herencia".

Explicación de Mozilla de los conceptos de herencia de CSS: en CSS, una descripción general de cada definición de propiedad de CSS indica si la propiedad se hereda de forma predeterminada ("Heredado: sí") o no ("Heredado: no"). Esto determina cómo se calcula el valor cuando no especifica un valor para el atributo del elemento.

2. Herencia de control

CSS proporciona cuatro valores de propiedad genéricos especiales para controlar la herencia. Cada propiedad css recibe estos valores. Esto significa que, al igual que el modelo de cuadro css, se puede cambiar cambiando el valor del tamaño del cuadro (cuadro de borde y cuadro de contenido). La herencia de las propiedades css también se puede controlar, por ejemplo, configurando los valores heredar, inicial, unestablecer y revertir.

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

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

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

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

1. Habilitar la herencia

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
• margen
• altura
• relleno

Cuarto, escribe en la parte de atrás.

Por lo tanto, al establecer el valor de altura del elemento secundario para heredar, puede heredar la altura del elemento principal, lo que hará que la altura del elemento secundario siempre sea la misma, lo que a veces es conveniente. Por supuesto, la mayoría de las propiedades, como el ancho, se pueden heredar de esta manera.