CSS有三大特性，分别是继承性，层叠性，优先级，这里讲解继承性：
以前的时候写css样式不太注意样式继承的问题，导致样式代码的不规范，所以现在的受教就是来源于样式的继承，就是减少很多样式代码，所以我们就需要把父元素中设定的某些属性和子元素是一样的就可以减少css代码，所以这也是项目中的优化方案，减少代码量都是性能优化的好习惯啊。
所以现在就来介绍属性继承：属性都是有当元素的一个 继承属性 （inherited property ）没有指定值时，则取父元素的同属性的 计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值），来自MDN。
所以说总结如下：这是来自别人的博客：但是在项目中书写规范一定要记得这个特性就会少写很多代码，代码优化方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24-css三大特性之继承性.html</title>
<style>
div{
color: red;
font-size:30px;
/*background: green;*/
text-decoration: none;
}
</style>
</head>
<body>
<!--
继承性(inheeited),子类可以使用父类的属性
注意点:
(1),不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承
(2),在css中的继承不仅是儿子才可以继承,只要是后代就可以继承
(3),css继承性中的特殊性
a标签的文字颜色和下划线是不能被继承的
h标签的文字大小是不能被继承的
应用场景:
一般用于设置网页上的一些共性信息
body{}
-->
<div>
<p>我是段落</p>
</div>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<div>
<a href="#">我是超链接</a>
</div>
<div>
<h1>我是标题</h1>
</div>
</body>
</html>然后有的时候就会涉及到多重背景，就是一个分成好几块的背景图，通过一个background-position来设置我们需要的背景图铺设，还有我们我理解的background-size的100%是相对于原图的100%，并不是相对于设定元素的百分比。
百分比的相对于：
链接：https://www.zhihu.com/question/36079531/answer/65809167
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
相对于父元素宽度的：
[max/min-]width、left、right、text-indent、padding、margin 等；
相对于父元素高度的：
[max/min-]height、top、bottom 等；
相对于主轴长度的：
flex-basis 等；
相对于继承字号的：
font-size 等；
相对于自身字号的：
line-height 等；
相对于元素自身宽高的：
border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等；
相对于行高的：
vertical-align 等；
特殊算法的：
background-position （方向长度 / 该方向除背景图之外部分总长度）、border-image-slice （相对于图片尺寸）、filter 系列函数等；
如果自身设置 position: absolute，“父元素”指：Boring：破坏文档流的div高度设为百分比是相对谁而言的？；
如果 position: fixed，“父元素”指视口（父级不存在 transform 为非 none 值的情况下）。
background-postion:x y;
x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
所以说background-size就是说在哪个元素里面作为背景图就是哪个元素的百分比。
多重背景的应用：
background-image: url('../img/invite/header.png'), url('../img/invite/body.png'), url('../img/invite/footer.png'), linear-gradient(to bottom, #410f9b, #41137e); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-size: 3.75rem 3.065rem, 3.75rem 3.59rem, 4.1rem 4.8rem, cover;
background-position: 0 0, 0 2.7rem, 0 5.45rem, 0 0;
这是我在body上的设置，所以说这就是多重背景，然后里面还可以使用background-position-y属性来设置背景图的排列。
top将背景图片的上边界与背景位置层的上边界对齐.
center将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐.
bottom将背景图片的下边界与背景位置层的下边界对齐.因为优化方案多是写成背景图，多重背景图相当于一个精灵图，节约性能的一种优化手段。