Question

当我找到developer mozilla docs页面，其中position:static;的描述已被给出但position:initial;是全局的时，我正在搜索position:static;和position: initial/inherit/unset;之间的区别价值观。这些全球价值意味着什么？

Answer 1

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

来自MDN：

initial CSS关键字将属性的初始值应用于元件。它允许在每个CSS属性上并导致该元素为其指定使用属性的初始值。

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

值得注意的是this is not supported in IE at all截至目前，即使在IE 11中，也不要使用它，除非你倾销对IE用户的支持。

这是如何运作的？

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

Demo

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这里讨论的是规范中定义的初始值，并由浏览器进行调整。

Demo

p {
  margin-left: 20px;
}

p span {
  margin-left: inherit;
}

默认情况下未继承父属性值时，

inherit非常有用，例如margin。在这里，它将从它的父声明而不是:root

中选择值

Answer 2

值initial可用于大多数属性 - 它不是position唯一的...它只是意味着默认返回浏览器的初始值元件。例如：

h2 {
    display: inline-block;
}

以上内容会覆盖h2元素的浏览器默认设置，即display: block。

更进一步，如果你想覆盖一个特定的h2以恢复其默认的块值，你可以这样做：

.parent h2 {
    display: initial;
}

在这种情况下，哪个会将显示重新设置为block {/ 1}}。

Answer 3

position: initial表示它将捕获默认（初始）值，因此它将捕获position: static。

如果您更改了元素的position: initial的默认值，并且想要返回此元素的默认position位置属性，则必须使用CSS。

Answer 4

Initial将元素位置恢复为默认值。因此，如果我们希望所有<p>元素都有边距，除了我们想要默认的边距，那么我们可以设置它。

div p {
  margin-left: 20px;
}

.special {
   margin-left: initial;
}

请参阅此示例中的更多详细信息：https://jsfiddle.net/s9zcsgfs/1/

你也可以在颜色

之类的东西上使用它

CSS

4 个答案: