CSS中的“属性：0”或“属性：0px”？

86

我已经看到过这种表示法使用了很多东西，我想知道，这两种表示法之间有什么显着区别吗？

element#id
{
  property: 0;
}

和

element#id
{
  property: 0px;
}

我property: 0px;一直都在使用，因为我觉得它看上去更干净，但是我不太确定浏览器的解释是否0px不同于0。

有谁知道哪个更好或更正确？

css properties zero

— 搅拌机
source

1

这是一个很好的问题，并且早于这个可能的副本：stackoverflow.com/q/5359222/292060，但是引用规范，该答案更好。

— goodeye 2012年

1

无论您使用哪种方式，请确保在整个项目中保持一致。

— PBwebD

56

单位标识符是可选的，但是没有着名的性能提升（虽然你是节省了两个字符）。

CSS2-从W3C CSS 2.1语法和基本数据类型规范开始：

长度值的格式（在本规范中用<length>表示）是<number>（带或不带小数点），其后紧跟一个单位标识符（例如px，em等）。长度为零后，单位标识符是可选的。

（强调我的）

CSS3-来自W3C CSS值和单位模块第3级（目前在撰写本文时处于候选推荐标准中）

对于零长度，单位标识符是可选的（即，可以在语法上表示为0）。

— 克里斯·比尔
source

1

怀疑当GZIP压缩处于活动状态时，您真的节省了2个字节。对我来说，这是您感到满意的问题。但是，某些CSS Linter可能不喜欢0px。

— Manuel Arwed Schmidt 2015年

34

虽然当值是时单位是可选的0，但我倾向于保留它，因为然后我可以使用Chrome的开发者工具通过单击值并按向上/向下箭头键来调整值。没有单位，那实际上是不可能的。

此外，CSS缩小器0还是会从值中剥离单位，因此最终并没有太大关系。

— 搅拌机
source

+1表示观察者知道这一点，并且通过包括它们可以拥有功能。

— Graham P Heath 2015年

9

如果您在没有标识符的情况下按0上的向上/向下箭头键，则Chrome的开发者工具默认为px。另外，在Chrome的开发者工具中，如果您将箭头向下箭头设置为0，则确实会保留px。

— PBwebD

1

@ testing123：我写这个答案的时候不认为是这样，但是很高兴知道。

— Blender

如果在应用程序的多个位置使用0和0px，会不会有执行时间问题？

— Kurkula

15

他们是一样的。浏览器将两者都解释为0，因此请选择对您而言更易读的内容。

— 塞巴斯蒂安·帕坦·马苏埃利
source

是否有“正确”或符合标准的选择？我知道您不能编写border: 3 solid，因为没有单位，但是零上有任何Web标准吗？

— Blender 2010年

1

正如我在回答中提到的那样，这是因为它们都是相同的：零乘以0还是零，无论您乘以像素的大小，em，ex还是百分比。

— AgentConundrum 2010年

不确定网络标准是什么意思，但是“ margin：10px 0 0 10px”可以正常工作，“ border：0”也可以正常工作，这意味着您可以将零用作“ none”的等效项。

— 汤姆（Tom）2010年

1

@blender请在下面的网页标准中查看我的答案，并提供文档链接。

— 克里斯·比尔

3

-1为具有可争论内容的答案，没有任何参考，链接或理由。请要么用数据备份您的意见，要么明确声明这只是您的意见，而不是事实信息。

11

零为零。0px= 0%= 0em= 0pt=0

大多数人都将其关闭，因为这完全是不必要的混乱。

— 卡盘
source

1

时间单位0是一个例外：不是0s/的有效替代方法0ms

— Henrik Christensen

5

据我所知，两者之间没有区别0px = 0em = 0ex = 0% = 0。作为开发人员，完全由您决定自己最喜欢的（当然，除非您有需要遵循的公司编码标准）。

从我见过的大多数代码示例中，大多数人都使用无单位版本。对我来说，看起来更干净。如果要推送大量数据（例如，如果您是Google），那么这两个字节可能会增加很多带宽，尤其是因为您很有可能在样式表中多次重复它们。

— 代理难题
source

6

如果您要推送大量数据（例如，如果您是Google的话），则最好使用为您执行此操作的缩小工具：p

— John Kurlak 2012年

4

零像素等于零英寸和零米，依此类推。0是你所需要的全部。

— 默德·奥穆拉利耶夫
source

有一会儿，我将对您的帖子投反对票，因为我认为您关于0像素等于0英寸的声明，依此类推，是错误的。:)因为在我的脑海中，我在想那怎么可能？他们是不同的单位。

— Web_Designer 2011年

2

我个人发现0比0px。这是两个可以累加的字符。为什么在不需要时添加额外的字节。我发现padding: 0px 0px 0px 0px可以很容易地将其表达为padding: 0太多的方式。

— 阿米尔·拉明法（Amir Raminfar）
source

1

您可以使用任何一种-我最好的建议是不要太担心，而要以一种或另一种方式保持一致。我个人更倾向于指定“ 0px”，原因如下：

使用0px可使内容与您指定的所有其他“ px”尺寸更加一致
它也比较冗长，很清楚地表明您将长度设置为零，而不是“将其关闭”标志
调整“ 0px”值使其更容易（如果需要）

— 克里斯·哈克罗
source

0

就像其他人所说的，它是否为0并不重要，尽管我选择将度量值添加到我的所有值中，以便其他查看我的CSS文件的人都可以评估它们可能在其他地方处理的度量值。

— 丹贾
source