css属性值initial、inherit、unset关键字区别

写了好几年的css还真没有注意到它们之间的区别，同时这也是一个很好的面试题。例如：问position属性有多少取值？

通常的回答是static、relative、absolute和fixed。当然还有一个sticky。其实，除此之外，CSS属性通常还可以设置下面几个值：

{
  position: initial;
  position: inherit;
  position: unset;
  /* CSS Cascading and Inheritance Level 4 */
  position: revert;
}

注：IE全部不支持。

initial(默认)关键字

简单的来说就是初始化到该属性浏览器默认定义的值。

<div class="demo">
    <p>什么是initial</p>
</div>

.demo{
    color:#f00;
}

p{
    color:initial;
}

猜猜文字颜色是红色还是黑色？答案是黑色，浏览器默认文字颜色就是黑色。

不明白我们再来一例：

.demo{
    font-size:32px;
}

p{
    font-size:initial;
}

猜猜文字大小是多少？答案是16px，大部分浏览器默认文字大小就是16px。

inherit(继承)关键字

每一个CSS属性必然是默认继承的 (inherited: Yes) 或者是默认不继承的 (inherited: no)其中之一。以background-color为例：

上图所示，表明它并不会继承父元素的background-color。

默认可继承属性如下：

• 所有元素可继承：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与initial的不同

inherit与initial实例之交替彩色线条表格

<table>
  <thead>
    <tr>
      <td>Dad</td>
      <td>Show</td>
      <td>Job</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Homer Simpson</td>
      <td>The Simpsons</td>
      <td>Safety Inspector</td>
    </tr>
    <tr>
      <td>Hank Hill</td>
      <td>King of the Hill</td>
      <td>Propane & Accessories</td>
    </tr>
    <tr>
      <td>Peter Griffin</td>
      <td>Family Guy</td>
      <td>Safety Inspector</td>
    </tr>
    <tr>
      <td>Bob Belcher</td>
      <td>Bob's Burgers</td>
      <td>Head Chef</td>
    </tr>
    <tr>
      <td>Fred Flinstone</td>
      <td>The Flinstones</td>
      <td>Crane Operator</td>
    </tr>
  </tbody>
</table>

body {
  background-color: #333;
  font-family: Helvetica;
  padding: 25px 0;
}

table {
  background-color: #fff;
  box-shadow: 1px 2px 3px #222;
  margin: 0 auto;
}

thead{
  background-color: #ff9e2c;
  color: #fff;
  font-size: 1.25em;
  font-weight: 800;
  text-shadow: 0 1px 2px #c56a00;
}

tbody tr {
  background-color: #eaeaea;
  color: #ff9e2c;
  border-top: 1px solid #ccc;
}

td {
  padding: 10px 15px;
}

tbody tr:nth-child(odd) {
  background-color: inherit;/*继承table背景色为白色*/
  color: initial;/*浏览器默认颜色*/
}

tbody tr:last-child {
  border-bottom: 1px solid #ccc;
}

unset（复位）关键字

unset是关键字initial和inherit的组合。

• 如果该属性是默认继承属性，该值等同于inherit
• 如果该属性是非继承属性，该值等同于initial
• 换句话说这个unset关键字会优先用inherit的样式，其次会应该用initial的样式。

举个例子，先列举一些 CSS 中默认继承父级样式的属性：

• 部分可继承样式: font-size, font-family, color, text-indent
• 部分不可继承样式: border, padding, margin, width, height

使用unset继承父级样式

​​​​​​​<div class="father">
    <div class="children">子级元素一</div>
    <div class="children unset">子级元素二</div>
</div>

.father {
    color: red;
    border: 1px solid black;
}

.children {
    color: green;
    border: 1px solid blue;
}

.unset {
    color: unset;
    border: unset;
}

由于color是可继承样式，设置了color: unset 的元素，最终表现为了父级的颜色red。

由于border是不可继承样式，设置了border: unset的元素，最终表现为border: initial，也就是默认border样式无边框。

unset 的一些妙用

例如下面这种情况，在我们的页面上有两个结构类似的 position: fixed 定位元素。

区别是其中一个是 top:0; left: 0;另一个是 top:0; right: 0;其他样式相同。通常而言，样式如下：

.left,
.right {
    position: fixed;
    top: 0;    
    ...
}
.left {
    left: 0;
}
.right {
    right: 0;
}

使用unset的方法：

.left,
.right {
    position: fixed;
    top: 0;    
    left: 0;
    ...
}
.right {
    left: unset;
    right: 0;
}