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

What is a pixel (px) in CSS?

提问by dotnet-practitioner

I am reading an ASP.NET book and it refers to CSS files and talks about pixels. But I never understood it from a resolution, layout, etc. point of view. For example, what does the following mean in CSS file definition?

我正在阅读一本 ASP.NET 书籍，它涉及 CSS 文件并讨论像素。但我从未从分辨率、布局等角度理解它。例如，以下在 CSS 文件定义中的含义是什么？

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

回答by bobince

This is a little beyond where you might be at the moment, but a CSS pixel is not necessarilyexactly the same size as a single pixel on your display. According to the spec:

这有点超出您目前所处的位置，但 CSS 像素不一定与显示器上的单个像素大小完全相同。根据规范：

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

如果输出设备的像素密度与典型计算机显示器的像素密度非常不同，则用户代理应重新调整像素值。建议参考像素为像素密度为 96dpi 且与阅读器距离为一臂远的设备上一个像素的视角。

So if you have one of those incredibly expensive extra-high-resolution displays that doesn't count as “typical”, the browser and/or OS may choose to redefine what a “pixel” is.

因此，如果您拥有那些不算作“典型”的极其昂贵的超高分辨率显示器之一，浏览器和/或操作系统可能会选择重新定义“像素”是什么。

The useful definition for a ‘px' as far as CSS authoring is concerned is: a ‘px' is the quantity of length equal to the pixel in an unscaled HTML <img> or CSS ‘background-image'.

就 CSS 创作而言，'px' 的有用定义是：'px' 是长度等于未缩放 HTML <img> 或 CSS 'background-image' 中的像素的数量。

回答by CMS

A pixel is generally thought of as the smallest single component of a digital image.

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

The number of pixels in an image is called resolution.

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

The screen resolution is the number of distinct pixels in each dimension that can be displayed by your screen.

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

In the css snippet that you posted you're applying 0 pixels of margin and padding to the element with id="header".

在您发布的 css 片段中，您将 0 像素的边距和填充应用于 id="header" 的元素。

_{(source: functionx.com)}

_{（来源：functionx.com）}

回答by Laserallan

"A pixel is not a little square" is a good discussion on what a pixel is.

“一个像素不是一个小方块”是对像素是什么的一个很好的讨论。

It might not be relevant to your specific question, but if anyone else finds this thread for a computer graphics related problem, this is great reading.

它可能与您的具体问题无关，但如果其他人发现此线程与计算机图形相关的问题，这是很好的阅读。

回答by Fritz H

It means a dimension, measured in pixels on-screen. E.g.

它意味着一个尺寸，以屏幕上的像素为单位。例如

width: 200px;

means an element is 200 pixels wide.

意味着一个元素是 200 像素宽。

A pixel is a "PICture ELement", meaning one coloured dot on the screen, probably much like the period at the end of this sentence.

一个像素是一个“图片元素”，意思是屏幕上的一个彩色点，可能很像这句话末尾的句号。

回答by tvanfosson

A pixelis a single dot on the screen. Your example sets the element named headerwith no padding or margin. To understand this you'll also need to understand the CSS box modelfor page layout.

甲像素是在画面上的一个点。您的示例设置命名的元素header没有填充或边距。要理解这一点，您还需要了解页面布局的CSS 框模型。

回答by Chuck Conway

A pixel is a unit of measurement, at least, in regards to CSS. There is also pt, em, percentage... there are a few others. Each have their strengths.

像素是一种度量单位，至少，就 CSS 而言。还有 pt、em、百分比……还有一些其他的。各有各的长处。

W3schoolsis chock full of references, check the one on CSS.

W3schools充满了参考资料，请查看CSS上的参考资料。

I recommend downloading Firebug and experiment with changing the pixel width/height.

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

回答by BrynJ

As stated by others, a pixel is simply a measurable unit that relates directly to the electronic display of data - a single pixel is the smallest an object on screen can be. The greater the screen resolution, the more pixels it can represent.

正如其他人所说，像素只是一个与数据的电子显示直接相关的可测量单位 - 单个像素是屏幕上物体的最小尺寸。屏幕分辨率越高，它可以表示的像素越多。

A note on the example given - a value of 0px is actually unnecessary as a zero value, and is better represented in CSS as just a 0 (it could equally be 0% or 0em, they all mean the same).

关于给出的示例的注释 - 0px 的值实际上不需要作为零值，并且在 CSS 中更好地表示为 0（它同样可以是 0% 或 0em，它们都意味着相同）。