在同一个类声明中使用 CSS 属性两次

【问题标题】：Using a CSS attribute twice in the same class decleration在同一个类声明中使用 CSS 属性两次
【发布时间】：2018-01-12 11:23:42
【问题描述】：

我已阅读 Defining CSS properties twice，但它确实涵盖了我正在查看的代码。

我现在明白 vmin 在做什么，但我不明白这段代码是如何工作的。什么时候按钮的高度是 200px，什么时候是从 vmin 获得的值。两次声明一个属性到底是什么意思？

  .centerButton {
    height: 200px;
    width: 200px;
    height: 50vmin;
    width: 50vmin;
}

谢谢

我正在查看https://airhorner.com/的源代码以供参考。

【问题讨论】：

【解决方案1】：

当您编写这样的代码时，像素值将成为旧浏览器的后备值。

例如Edge 16 会将语句解释为：

.centerButton {
    height: 50vmin;
    width: 50vmin;
}

但 Internet Explorer 9 将以像素为单位设置样式（IE9 使用 vm-units insted of vmin）：

.centerButton {
    height: 200px;
    width: 200px;
}

当你不小心颠倒了顺序时，像素值会覆盖 vmin：

.centerButton {
    height: 50vmin;
    width: 50vmin;
    /* this replaces previous values */
    height: 200px;
    width: 200px;
}

【讨论】：