谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

106 阅读 0 评论 70 点赞

我是靠谱客的博主沉静耳机，这篇文章主要介绍谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset，现在分享给大家，希望可以做个参考。

开本系列，谈谈一些有趣的

复制代码

1
CSS

题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

谈谈一些有趣的CSS题目（十一）-- reset.css知多少

谈谈一些有趣的CSS题目（十二）-- 深入探讨 CSS 特性检测 @supports 与 Modernizr

谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

所有题目汇总在我的 Github 。

正文从这里开始。

经常会碰到，问一个 CSS 属性，例如

复制代码

1
position

有多少取值。

通常的回答是

复制代码

1
static

、

复制代码

1
relative

、

复制代码

1
absolute

和

复制代码

1
fixed

。当然，还有一个极少人了解的

复制代码

1
sticky

。其实，除此之外， CSS 属性通常还可以设置下面几个值：

复制代码initial
```
1
initial
```
复制代码inherit
```
1
inherit
```
复制代码unset
```
1
unset
```
复制代码revert
```
1
revert
```

复制代码

1
2
3
4
5
6
7
{
position: initial;
position: inherit;
position: unset
/* CSS Cascading and Inheritance Level 4 */
position: revert;
}

了解 CSS 样式的 initial（默认）和 inherit（继承）以及 unset 是熟练使用 CSS 的关键。（当然由于 revert 未列入规范，本文暂且不过多提及。）

initial

复制代码

1
initial

关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）

inherit

每一个 CSS 属性都有一个特性就是，这个属性必然是默认继承的 (

复制代码

1
inherited: Yes

) 或者是默认不继承的 (

复制代码

1
inherited: no

)其中之一，我们可以在 MDN 上通过这个索引查找，判断一个属性的是否继承特性。

譬如，以

复制代码

1
background-color

为例，由下图所示，表明它并不会继承父元素的

复制代码

1
background-color

可继承属性

最后罗列一下默认为

复制代码

1
inherited: Yes

的属性：

所有元素可继承：visibility 和 cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse

还有一些 inherit 的妙用可以看看这里：谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit，合理的运用 inherit 可以让我们的 CSS 代码更加符合 DRY（Don‘’t Repeat Yourself ）原则。

unset

名如其意，

复制代码

1
unset

关键字我们可以简单理解为不设置。其实，它是关键字

复制代码

1
initial

和

复制代码

1
inherit

的组合。

什么意思呢？也就是当我们给一个 CSS 属性设置了

复制代码

1
unset

的话：

如果该属性是默认继承属性，该值等同于
复制代码inherit
```
1
inherit
```
如果该属性是非继承属性，该值等同于
复制代码initial
```
1
initial
```

举个例子，根据上面列举的 CSS 中默认继承父级样式的属性，选取一个，再选取一个不可继承样式：

选取一个可继承样式:
复制代码color
```
1
color
```
选取一个不可继承样式:
复制代码border
```
1
border
```

使用

复制代码

1
unset

继承/取消样式：

看看下面这个简单的结构：

复制代码

1
2
3
4
<div class="father">
<div class="children">子级元素一</div>
<div class="children unset">子级元素二</div>
</div>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
.father {
color: red;
border: 1px solid black;
}
.children {
color: green;
border: 1px solid blue;
}
.unset {
color: unset;
border: unset;
}

由于
复制代码color
```
1
color
```
是可继承样式，设置了
复制代码color: unset
```
1
color: unset
```
的元素，最终表现为了父级的颜色
复制代码red
```
1
red
```
。
由于
复制代码border
```
1
border
```
是不可继承样式，设置了
复制代码border: unset
```
1
border: unset
```
的元素，最终表现为
复制代码border: initial
```
1
border: initial
```
，也就是默认 border 样式，无边框。

CodePen Demo -- unset Demo;

title="unset Demo" src="http://codepen.io/Chokcoco/embed/BRjBox/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

复制代码

1
unset

的一些妙用

例如下面这种情况，在我们的页面上有两个结构类似的

复制代码

1
position: fixed

定位元素。

区别是其中一个是

复制代码

1
top:0; left: 0;

，另一个是

复制代码

1
top:0; right: 0;

。其他样式相同。

假设样式结构如下：

复制代码

1
2
3
4
<div class="container">
<div class="left">fixed-left</div>
<div class="right">fixed-right</div>
</div>

通常而言，样式如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
.left,
.right {
position: fixed;
top: 0;
...
}
.left {
left: 0;
}
.right {
right: 0;
}

使用 unset 的方法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
.left,
.right {
position: fixed;
top: 0;
left: 0;
...
}
.right {
left: unset;
right: 0;
}

CodePen Demo -- unset Demo;

title="unset Demo" src="http://codepen.io/Chokcoco/embed/eWJOqB/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。