在CSS中，我們經常需要設置圖片的位置坐標。但是怎樣才能知道圖片的坐標呢？本文將介紹在CSS中如何查看圖片的坐標。 首先，我們需要知道CSS的一些基本概念。CSS中有兩個基本屬性可以用來設置圖片的位置：left和top。它們分別表示圖片在其定位容器中左側和頂部的位置坐標。當我們設置一個圖片的left為20px，top為30px時，這張圖片將會在其定位容器中向右移動20個像素，向下移動30個像素。 然后，我們需要了解一些常用的坐標單位。常見的坐標單位包括像素（px）、百分比（%）、EM（字體大小單位）、REM（根元素字體大小單位）、視窗寬度（vw）以及視窗高度（vh）。其中，像素是最常用的單位，它可以表示一個屏幕上的點，其值不會隨屏幕大小的改變而改變。而百分比則是相對于其容器的大小而言，它的值會隨容器大小的改變而改變。 接下來，我們可以使用CSS中的“開發者工具”來查看圖片的坐標。在Google Chrome瀏覽器中，我們可以按下F12鍵打開開發者工具。然后，選擇“Elements”選項卡選中需要查看坐標的圖片，在右側“Styles”面板中可以找到該圖片所在的div或其他元素。在這里，我們可以看到left和top屬性的值。這些值就是圖片在其定位容器中的坐標值。 除了使用開發者工具，我們還可以在CSS代碼中使用預先定義好的變量來表示圖片的坐標。我們可以使用pre標簽來呈現CSS代碼。

.img-box {
position: relative;
left: 20px;
top: 30px;
}

在上述代碼中，我們定義了一個類名為“img-box”的div元素，并將其position屬性設置為relative。這意味著該div元素將成為其內部其他元素的定位容器。然后，我們通過設置left和top屬性值為20px和30px來移動該div元素內部的圖片。 在日常開發中，正確地設置圖片的位置坐標非常重要。通過使用坐標單位、開發者工具以及預定義的變量，我們可以輕松地設置出圖片的正確位置。