一、继承元素
常见的可继承属性
- ul
- li
- dl
- dd
- dt
- color
- font-size
- font-family
常见不可继承属性
- width
- border
- margin
- height
- padding
CSS 可继承属性意味着后代元素的样式会继承祖先元素样式
css中有三个概念对于理解css是如何工作的十分重要,他们分别是"层叠"、"优先级"和"继承"。
二、控制继承
css为控制继承提供了四个特殊的通用属性值。每个css属性都接收这个值。这意味着,就像css盒子模型可以通过box-sizing的值(border-box和content-box)来改变。css属性的继承情况也是可以控制的,例如通过设置值inherit、initial、unset和revert来控制。
- inherit: 设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承"。
- initial:设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为 inherit。
- unset:将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样。
- revert:新的属性,目前仅被很少浏览器支持。 1、开启继承 height 在 CSS 原生上不可继承属性,子元素不会继承父元素的 height, 但是这种现状是可以改变的,当子孙元素的 height 设置 为 inherit, 该子孙元素的 height 值就会取其父元素的 height 值,就像是子元素继承了父元素的高度。
如果你希望子元素的高度一直保持和父元素一直,那么设置子元素的 height 为 inherit,最合适不过了。
height 在 CSS 原生上不可继承属性,子元素不会继承父元素的 height, 但是这种现状是可以改变的,当子孙元素的 height 设置 为 inherit, 该子孙元素就会的 height 值就会取其父元素的 height 值,就像是子元素继承了父元素的高度。
如果你希望子元素的高度一直保持和父元素一直,那么设置子元素的 height 为 inherit,最合适不过了。 inherit:设置该属性会使子元素属性和父元素相同。实际上,就是 "开启继承"。这个值几乎可以被 所有CSS属性使用
2、重设几乎所有属性值
all 结合unset,重置几乎所有样式,可以看成是一种对原始继承的控制改变,all属性,将这种改变的有效范围放大了,因为unset几乎可以重置所有属性的值。这里的重置通常是指将属性重置为自然值,也就是如果属性是自然继承那么就是 inherit,否则和 initial一样。
css的shorthand属性all可以用于同时将这些继承值中的一个,应用于(几乎)所有属性。它的值可以是其中任意一个(inherit、initial、unset、or revert)。这是一种撤销对样式所做更改的简便方法,以便回到之前已知的起点。
例如:两个div一个使用类名设置样式,一个使用标签名设置,使用标签名设置样式之后在使用类名设置样式,类名设置样式中增加all: unset会让div标签名设置的样式恢复为原始样式