关键字
css中的全局关键字的属性值有inherit
和initial
还有unset
以及revert
。前两个属性值的兼容性比较好。第一个用的地方比较多。这个属性值表示继承。当我们可以给输入框的内置字体进行重置,只需要设置字体为inherit就行。如果想要子元素的高度可以继承,给高度也设置这个属性值。initial
可以用于重置需要的css样式,还有就是当我们不知道某些属性的初始值也可以使用initial
。我们需要注意的是,当给p元素的display设置为initial时,这个元素垂直方向的text-indent
和margin
属性都会失效。这个属性不支持ie浏览器。如果我们想要某个属性就是用inherit
关键字,如果想要初始值使用inherit
关键字。
.test {
font-size: initial;
}
unset
意思是不固定的关键字。它的特性可以像inherit也可能会像initial关键字,主要看它用在什么属性上。如果用在具有继承特性的就等同于inherit
,反之就相当于使用initial
关键字。这个关键字一般配合all
属性去使用。如果我们想要一下子将某个属性进行重置,我们可以设置all: unset
进行批量重置。这个属性值除了ie浏览器不兼容对其他浏览器兼容性都比较好并且这个关键字属性值的用的场景比较少。
p {
display: initial;
}
revert
意思是恢复,可以使当前元素的样式被还原成浏览器的内置样式。虽然是这样但是我们需要注意的是,我们一般不对li
元素进行任何样式的重置。原因是因为这个元素没有外间距和内间距,而且它的list-style-type也是继承过来的,所以不对li元素使用revert关键字。兼容性上有一些差,而且有可能在谷歌的某些版本上无法看到ol元素文字前面的数字序号。
.test {
all: unset;
}
all
属性可以用来重置css属性。但是有一些是无法重置的,其中有css中自定义属性和unicode-bidi
和direction
。这个属性可以结合上面四个关键字去使用,但是一般不使用前两个关键字,没有什么大的用处。主要用于后面两个关键字属性值。当结合revert使用时可以让元素恢复成浏览器默认的样式。如果使用在direction
上使用,可能会颠倒文字的顺序。