什么是CSS中的初始位置

Question

我在寻找之间的差异position:static;，并position:initial;当我发现开发商Mozilla的文档，其中网页position:static;的描述给定，但是position: initial/inherit/unset;是全球性的价值。这些全球价值意味着什么？

Answer 1

initial不仅用于position，它还是一个通用值，您可以为CSS中的任何属性设置它。

从MDN：

的initialCSS关键词的属性的初始值适用于一个元件。每个CSS属性都允许使用该属性，并且会导致为其指定属性的元素使用该属性的初始值。

使用initial值时，它将选择规范中定义的值作为属性默认值。

值得一提的是，到目前为止，IE中甚至根本不支持此功能，甚至在IE 11中也不支持。因此，除非您转储对IE用户的支持，否则请不要使用它。

如何运作？

想想看，您有一个元素p，其嵌套span的颜色设置为orange，后来initial用于span它的设置将降至w3c规范中提到的默认值。

演示版

span {
  color: red; 
  /* won't make any difference */
}

p {
  color: orange;
}

p span {
  color: initial; 
  /* sets to initial value defined in spec/user-agent */
}

不要将其与 inherit

inherit与完全不同initial。哪里initial会选择从价值:root，inherit将值从它的母公司。:root这里是在讨论规范中定义的初始值，这些初始值是由浏览器修改的。

演示版

p {
  margin-left: 20px;
}

p span {
  margin-left: inherit;
}

inherit当默认情况下不继承父属性值时，此功能很有用margin。在这里，它将从其父声明中选择值，而不是:root