这篇文章主要介绍了“CSS控制继承有哪些通用属性值，怎样开启继承”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS控制继承有哪些通用属性值，怎样开启继承文章都会有所收获，下面我们一起来看看吧。

一、前言

我们知道，CSS 属性有可继承和不可继承之分，例如 height 和 width 就 是CSS 中典型的不可继承属性，color 和 font-size 是典型的可继承属性。CSS 可继承属性意味着后代元素的样式会继承祖先元素样式，例如一个父元素的 color 是 red，那么如果它的子孙元素自己没有设置 color 值，就会取自父元素的 color 值。同样的条件，CSS 属性由 color 改为 height，由于默认是不可继承属性，其子孙元素不会继承父元素的 height 值。

这就是 CSS 中的继承与非继承属性的区别，区别在于某一元素的某类样式值，会不会被其子孙元素继承，也就是其子孙元素的样式值会不会取自父元素。

css 中有三个概念对于理解 CSS 是如何工作的十分重要，他们分别是“层叠”、“优先级”和“继承”。

Mozilla 上关于 CSS 继承概念的解释： 在 CSS 中，每个 CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

二、控制继承

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，最合适不过了。

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
• margin
• height
• padding

四、总结

所以，通过将子元素的 height 值设置 inherit，可以继承父元素的高度，这会使得子元素的高度始终保持一致，这有时会很便利。 当然 width 等大多数属性都可以这样开启继承。

到此这篇关于“CSS控制继承有哪些通用属性值，怎样开启继承”的文章就介绍到这了,更多相关CSS控制继承有哪些通用属性值，怎样开启继承内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3实现照片墙的要点和代码是什么

  对于CSS3能做动漫应该很多小伙伴都知道，当我们自己想做照片墙效果的话要怎么做呢？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• CSS中怎样用Single Div实现复杂的图形

  经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就

• css实现元素居中有哪些方法，你知道几个？

  在开发中，很多需求需要我们对元素居中，例如文本居中，多行文本居中，块级元素水平居中、垂直居中等，那么这些要如何实现呢？下面是一些css实现元素居中的方法，有需要的朋友可以参考一下。

• Sass和Compass是什么，怎么进行安装

  Sass和Compass是什么？在讲这个之前呢，先介绍下CSS。相信你跟我一样，经过若干段时间的开发后也比较熟悉CSS。但是有一点我们都很清楚，它是一种样式表，并不是一种编程语言。所以，有些童鞋经常说自己最近在学习CSS编程是错误滴。CSS里包含了很多选择器及应用的样式规则，而其中并不包含变量、函数、继承等这些我们在一般 ...

• css遮罩层镂空效果怎样做？教你四种方法

  css遮罩层镂空效果怎样做？css遮罩层镂空效果是比较常用的，能应用的场景有很多，而实现css遮罩层镂空效果的方法也有很多，接下来给大家分享四种方法，需要的朋友可以参考。