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

2019-05-2995次阅读css3css

写了好几年的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;
}

 

上一篇: :root,:empty,:not伪类选择器  下一篇: 获取网址url查询参数快速转换为对象  

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