如何理解css中坐标[转载]


CSS 用于 Web 页面的布局,布局涉及元素的位置,元素位置必须参照坐标系来确定。CSS 坐标系与数学坐标系不同,它的坐标原点在浏览器可视窗口或元素的左上角,x 轴正方向向右,而 y 轴正方向则向下,如下图所示。CSS 坐标单位包括数值、百分比和相对单位。
查找相关文章:css 坐标

CSS 用于 Web 页面的布局,布局涉及元素的位置,元素位置必须参照坐标系来确定。CSS 坐标系与数学坐标系不同,它的坐标原点在浏览器可视窗口或元素的左上角,x 轴正方向向右,而 y 轴正方向则向下,如下图所示。CSS 坐标单位包括数值、百分比和相对单位。

本文转载自
http://www.cn-cuckoo.com/2007/08/20/understand-css-coordinate-90.html

你也可以了解一下这篇文章 CSS伪类制作鼠标滑动链接特效

background:url(css.gif) 30px 30px no-repeat;

当前容器的 相对于图片的左上角位置是 x,y=0,0

css中坐标位置的理解

距离原点远为正

一个 Web 页面中,不止一个坐标系,而是有多个元素就有多少个体系。以水平选项卡式的导航条为例,下图的效果:

css中位置的理解

使用了下面一张背景图像:

理解css中位置的含义

使用一张背景图像的好处在于浏览器同时下载三个状态的背景,而不用等到需要时(如鼠标悬停时)再下载,从而避免了延迟。

这张背景图由三个 127 像素宽的选项卡组成,在定义 CSS 规则时,正常、悬停和当前状态的相应规则如下:

background:url(images/nav.gif)  no-repeat;

第一条规则表明,背景图像的左上角位置(坐标原点)要和选项卡元素(上例中的 Joumal 所在元素)的左上角位置(坐标原点)重合。如下图所示:

理解css中位置的含义

background:url(images/nav.gif) -127px 0  no-repeat;

第二条规则表明,背景图像的左上角位置要和选项卡元素(上例中的 Home 所在元素)左上角位置(坐标原点)左侧(负值表示向左) 127 像素处的点重合。如下图所示:

css中层的理解

background:url(images/nav.gif) -254px 0  no-repeat;

第三条规则表明,背景图像的左上角位置要和选项卡元素(上例中的 Maps 所在元素)左上角左侧 254 像素处的点重合。如下图所示:

理解css中位置

通过下面这幅图可以进一步加深对两个元素(选项卡和背景图像)坐标系相对位置关系的理解:

理解css中坐标的意思