这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战
背景
学习前端三个月了，准备刷刷面试题，总结总结，一天几道面试题，向大厂进军。
这期我们讲一下CSS全局关键字属性值。
inherit
inherit 这个关键字是继承的意思。从IE8开始支持。
inherit 是一个实用性和兼容性都非常好的CSS属性值，例如我们使用inherit 关键字充值输入框的内置字体。
input,textarea{
font-family:inherit;
}
又比如：子元素设置height：inherit实现高度继承等。
我们来看看下面代码，具体实现下看看效果：
<style>
.content {
position: relative;
width: 100px;
height: 100px;
background-color: red;
color: black;
font-size: 20px;
margin: 30px auto;
}
.test1 {
position: absolute;
width: inherit;
height: inherit;
background-color: inherit;
color: #fff;
left: 120px;
}
</style>
<body>
<div class="content">
父DIV
<div class="test1">子DIV</div>
</div>
</body>
效果如下：
initial
initial 是初始值关键字。可以把当前的CSS属性的计算值还原成CSS语法中的规定初始值。
我们来看个例子：主要修改font-Size
<style>
.content {
position: relative;
width: 200px;
height: 200px;
background-color: red;
color: black;
font-size: 50px;
margin: 30px auto;
}
.test1 {
position: absolute;
width: 200px;
height: 200px;
background-color: inherit;
color: #fff;
//我们看这里，我们使用的是初始值
font-size: initial;
left: 220px;
}
</style>
<body>
<div class="content">
父DIV
<div class="test1">子DIV</div>
</div>
</body>
效果如下：
如果我们子div不设置font-size,默认会继承父div的font-size:50px。 当我们设置子div的font-size为initial后，字体大小使用的就是CSS规范中定义的初始值，这个初始值为medium，默认16px。
实际用途：
我们要充值某些CSS样式，但是又不知道默认初始值是什么的时候，我们可以设置initial。
误区：
很多人可能有这样一个误区，把initial 关键字理解为浏览器设置元素的初始值。其实不是，一定要记住，initial代表的是CSS属性的初始值。
比如：实际开发中，我们一般会把 <ul> 元素或者 <ol> 元素默认的list-style-type样式重置。但是很有可能，我们在某些区域需要再次重新使用list-style-type样式（小圆点或者数字）,这个时候有些开发者就会使用关键字initial进行还原，这个是不正确的。
ol{
padding:initial;
list-style-type:initial;
}
//设置上以后没有用，上面的css等同于下面的CSS
ol{
padding:0; //这里
list-style-type:disc; //这里
}
//我们预想应该是这样的：
ol{
padding:0 0 0 40px;
list-style-type:decimal;
}
这种情况我们应该使用关键字 revert,而不是 initial
unset
unset 是不固定值关键字，特性如下：
- 如果当前使用的CSS属性具有继承特性，等同于
inherit关键字 - 如果当前使用的CSS属性没有继承特性，等同于
initial关键字
一般是配置 all来进行批量重置，才更具有意义。
具体使用场景：
例如： Chrome浏览器支持<dialog>元素，我们一般使用<dialog>元素实现语义更好弹窗组件。但是我们又不想使用<dialog>内置的样式。 样式很多，我们不可能一个一个去重置，这个时候 all:unset就派上用场了，可以进行批量重置。
dialog{
all:unset;
... //自己设置自己需要的样式
}
revert
revert 关键字可以让当前元素的样式还原成浏览器内置的样式。
我们来测试一下：我们给全局 <ol> 标签设置 list-style-type:none。然后我们在某一个局域区域又想使用它默认的样式小圆点。（测试来源于火狐浏览器）
<style>
ol {
position: relative;
color: black;
width: 500px;
font-size: 50px;
margin: 30px auto;
list-style-type: none;
}
.content {
//局部区域恢复使用默认样式
list-style-type: revert;
}
</style>
<body>
<ol>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ol>
<div class="test2">
<ol class="content">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ol>
<div>
</body>
结语
一步一步慢慢来，踏踏实实把活干！
