CSS中的像素(px)是什么?

19

我正在阅读一本ASP.NET书籍,它提到了CSS文件并谈论了像素。但是从分辨率、布局等角度来看,我从未理解它。例如,在CSS文件定义中,以下内容是什么意思?

#header
{
    padding: 0px;
    margin: 0px;
}

2
0px 应该只写成 0,因为它在任何单位下都是相同的大小。 :) - deceze
7个回答

35

这可能超出了您目前的水平,但是CSS像素不一定与显示器上的单个像素大小完全相同。根据规范

如果输出设备的像素密度与典型计算机显示器的像素密度非常不同,则用户代理应重新缩放像素值。建议参考像素是在与读者的距离为一臂之长且具有96dpi像素密度的设备上的一个像素的视觉角度。

因此,如果您拥有价格昂贵的超高分辨率显示器并且不属于“典型”,浏览器和/或操作系统可能会选择重新定义“像素”的含义。

就CSS编写而言,“px”的有用定义是:一个‘px’的长度等于未缩放HTML<img>或CSS‘background-image’中的像素数量。


3
谢谢Bobince。这个问题需要两个答案:基本解释(由CMS和其他人提供)是大多数读者感兴趣的,以及技术性答案,解释像素是相对单位(而不是绝对单位),CSS像素不一定与设备像素相同。 - David Kolar
2
你所引用的像素单位是指“参考”像素,这个像素单位可能与CSS中的“px”单位没有任何关系了。CSS 2.1重新定义了“1px”始终等于“0.75pt”。它还定义,在低分辨率设备(如传统监视器)上,所有绝对单位都应调整,以便“1px”应该是最接近参考像素的设备像素的最接近倍数。因此,“1cm”不再一定是一厘米,但它确实是“37.8px”,因为这就是px单位的计算方式。[链接] (http://www.w3.org/TR/CSS21/syndata.html#length-units) - thomasrutter
+1 对于规范的引用。我以前从未见过这样的引用 :) - Michael Mior

23

像素通常被视为数字图像中最小的单个组件。

图像中的像素数量称为分辨率。

屏幕分辨率是屏幕每个维度可以显示的不同像素数。

在你所发布的css代码片段中,你将0像素的margin和padding应用于id为"header"的元素。


(来源: functionx.com)


7
"像素不是一个小正方形" 是一篇很好的关于像素的讨论。
虽然它可能与您特定的问题无关,但如果其他人在寻找计算机图形学相关的问题时发现了这个线程,这是很棒的阅读材料。

很棒有人喜欢它!当帖子的主题改变时,它甚至比我写的更离题 :) - Laserallan
1
那个链接已经失效了,但是现在可以在这里找到:http://alvyray.com/memos/6_pixel.pdf [简述:像素不是一个小正方形,也不是一个小矩形;它是一个采样。] - ShreevatsaR
1
非常感谢指出。我也已经在帖子中修正了链接。 - Laserallan
我部分同意。从传感器读取的内容很可能不是点采样(虽然也很可能不是一个小正方形)。我认为设备制造商在将原始传感器数据存储为图像格式时,应该将其转换为尽可能准确的点采样表示。这样,他们可以确保在不知道捕获设备的任何信息的情况下操作图像的程序可以做到尽可能好。 - Laserallan
1
刚刚注意到这位作者实际上是皮克斯的联合创始人! - Obay Abd-Algader
显示剩余3条评论

5
它指的是屏幕上以像素为单位测量的尺寸。例如:
width: 200px;

这意味着该元素宽度为200像素。

像素是“图片元素”的缩写,指屏幕上的一个彩色点,可能类似于这个句子末尾的句号。


1

像素是屏幕上的一个单独点。你的示例设置了名为header的元素,没有填充或边距。要理解这一点,您还需要了解CSS盒模型以进行页面布局。


不,那不是真的。在低分辨率屏幕上,它是屏幕上的一个像素,但在高DPI屏幕上,它可以是2×2或更多物理像素。 - jiwopene

0

像素是一种测量单位,至少在CSS方面是这样。还有pt、em、百分比等等,每个都有其优点。

W3schools充满了参考资料,可以查看CSS的参考资料。

我建议下载Firebug并尝试更改像素宽度/高度。


0

正如其他人所说,像素是一种可测量的单位,直接关系到数据的电子显示 - 单个像素是屏幕上物体可以达到的最小值。屏幕分辨率越高,它能表示的像素就越多。

关于给出的示例说明 - 0px的值实际上是不必要的,更好地在CSS中表示为0(同样可以是0%或0em,它们都意味着相同的含义)。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接