绝对路径与相对路径转化【原创理论模型+转载文章，理论模型+例子很好】

感悟与核心提取
【模】规定：A/B/C/D，D文件的目录是A/B/C/，C文件的目录是A/B/
【模型】仍如A/B/C/D：一个点（即.）代表上一个字母，一个/代表该字母后面加个/，即有/的才表示目录

【实操】从最后一个字母出发，遇到一个点往前挪一个字母；遇到一个/在当前字母后面添/，若/后无内容则完成，若此/后还有内容则后退一个字母

【理论1】…/ 来表示上一级目录
【例1】D的上级目录为A/B/（因为D本身的目录是A/B/C/）：从D出发，2个点往前移2个字母到B，遇到/在B后添/，即为A/B/
【理论2】…/…/表示上上级的目录
【例2】续上遇到第一个/，但这个/后仍有内容，故后退一个字母，从B退到C；接下来是2个点，C前移2个字母到A，又遇到第二个/，这个/后无内容，故A/

【例3】写出A/B/C转A/B/D的相对路径→ ./D

【例4】 c:/website/web/xz/index.htm
c:/website/web/img/photo.jpg
在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：…/…/img/photo.jpg
这种写法是不正确的，在此例中对于index.htm文件来说…/…/img/photo.jpg所代表的绝对路径是：c:/website/img/photo.jpg。
正确写法：可以使用…/img/photo.jpg的相对路径来定位文件

举例：
比如说你的C盘有个文件夹叫ABC，文件夹下有两个文件file1和file2

[转]
如果让文件file1说出文件file2的位置(也就是路径),那么它有两种表示方法:
第一种：C:\ABC\file2 这就是绝对路径,指明file2文件在C盘ABC文件下,从最大的目录C盘开始表示出来.
第二种：file2 这就是相对路径,因为file1文件和file2文件都在C:\ABC下,所以它们的路径前面"C:\ABC"都是一样,就不用表示出来了.

    在这里，有的朋友可能会问，如果file1和file2不在同一个文件夹下，相对路径该怎么表示呢。比如：

    file1的位置为:C:\ABC\path1\file1；

    file2的位置为C:\ABC\path2\file2;

    这时候让file1说出file2的位置则为：../path2/file2；两个点（..）表示回退一层。解释下就是，file1在path1文件夹下，先点点，回退到ABC文件夹下，然后加上path2/file2，也就是../path2/file2，这就是相对路径了。

    此处要注意：不同操作系统使用的斜杠不同（Linux系统是/，window系统是\；知道即可）


    有时候在做开发的时候，把页面传到服务器上就总是出现看不到图片，css样式表失效等错误。这种情况下多半是由于你使用了错误的路径，在应该使用相对路径的地方使用了绝对路径，导致浏览器无法在指定的位置打开指定的文件。

      下面我们就来谈一下最让初学者头疼的相对路径与绝对路径的区别问题。

什么是绝对路径：
大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似以http://xm-evaluate-file.oss-cn-beijing.aliyuncs.com/icons/medal1/%E4%BC%A0%E6%89%BF.png来确定文件位置的方式也是绝对路径。

    另外，在网站的应用中，通常我们使用"/"来表示根目录，/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的，因为要知道这里所指的根目录并不是你的网站的根目录，而是你的网站所在的服务器的根目录，因此当网站的根目录与服务器根目录不同时，就会发生错误。

什么是相对路径：
让我们先来分析一下为什么会发生图片不能正常显示的情况。举一个例子，现在有一个页面index.htm,在这个页面中需要显示一张图片photo.jpg。他们的绝对路径如下：
c:/website/index.htm
c:/website/img/photo.jpg

    如果你使用绝对路径c:/website/img/photo.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件，但是当你将页面上传到网站的时候就很可能会出错了，因为你的网站可能在服务器的c盘，可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由会有c:/website/img/photo.jpg这样一个路径。那么，在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢？对，应该是用相对路径，所谓相对路径，顾名思义就是自己相对与目标的位置。在上例中index.htm中要联接的photo.jpg可以使用img/photo.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。

    另外我们使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。（学习过Linux的朋友可能更容易理解）

    再看几个例子，注意所有例子中都是index.htm文件中联接有一张图片photo.jpg。

例1：
c:/website/web/index.htm
c:/website/img/photo.jpg
在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：img/photo.jpg
这种写法是不正确的，在此例中，对于index.htm文件来说img/photo.jpg所代表的绝对路径是：c:/website/web/img/photo.jpg，显然不符合要求。
正确写法：使用…/img/photo.jpg的相对路径来定位文件

例2：
c:/website/web/xz/index.htm
c:/website/img/images/photo.jpg
在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：…/img/images/photo.jpg
这种写法是不正确的，在此例中对于index.htm文件来说…/img/images/photo.jpg所代表的绝对路径是：c:/website/web/img/images/photo.jpg。
正确写法：可以使用…/…/img/images/photo.jpg的相对路径来定位文件

例3：
c:/website/web/xz/index.htm
c:/website/web/img/photo.jpg
在此例中index.htm中联接的photo.jpg应该怎样表示呢？
错误写法：…/…/img/photo.jpg
这种写法是不正确的，在此例中对于index.htm文件来说…/…/img/photo.jpg所代表的绝对路径是：c:/website/img/photo.jpg。
正确写法：可以使用…/img/photo.jpg的相对路径来定位文件

    通过以上的例子可以发现，在把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分都可以忽略，不做考虑。只要考虑他们不同之处就可以了。总之一句话就是，先用点点倒着回退到相同的目录下，然后再正着去找另外一个文件就对了。

总结：
绝对路径，从根目录为起点到某一个目录的路径；
相对路径，从一个目录为起点到另外一个的目录的路径。

例如：
┍ A文件夹
C -|
┕ B文件夹

绝对路径： C:\A文件夹

相对路径（如果你在A文件夹时）： …\B文件夹 （‘…\’向上一级意思）
————————————————
版权声明：本文为CSDN博主「心所向皆可成」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hgd613/article/details/8041662/