我們?cè)贖TML/CSS/JS代碼中經(jīng)常會(huì)寫(xiě)一些文件的相對(duì)路徑和絕對(duì)路徑膜眠，絕對(duì)路徑還好說(shuō)籽孙，相對(duì)路徑到底他媽的相對(duì)的誰(shuí)呢？恐怕很多人都不敢說(shuō)完全弄清楚了伐蒋。尤其是現(xiàn)在的開(kāi)發(fā)過(guò)程工三，有開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境先鱼、部署環(huán)境俭正，每個(gè)環(huán)境的相對(duì)路徑可能又有區(qū)別。今天我就全面做測(cè)試焙畔，測(cè)試到底他媽的都是相對(duì)誰(shuí)掸读。
基礎(chǔ)知識(shí)
../、./宏多、/儿惫、只寫(xiě)文件名，這四種情況分別代表什么伸但？
-
../代表父級(jí)目錄肾请，連寫(xiě)的話，比如../../表示往上追溯兩級(jí)目錄 -
./代表當(dāng)前目錄更胖，連寫(xiě)的話無(wú)意義 -
/代表網(wǎng)站根目錄铛铁，就是服務(wù)器www目錄 - 只寫(xiě)文件名，跟
./效果一樣
HTML文件代碼中的相對(duì)路徑
測(cè)試步驟：
在服務(wù)器建立/a/b/c/d目錄却妨。把1.html放到d里面饵逐，內(nèi)容是：<a href="../x/y/z.html">link</a>
訪問(wèn)http://localhost/a/b/c/d/1.html，右擊link管呵，看屬性梳毙，得到http://localhost/a/b/c/x/y/z.html，說(shuō)明捐下，../x/y/z.html的../是基于1.html的位置向上追溯了一層账锹。
結(jié)論：HTML代碼中的相對(duì)路徑就是以本HTML文件所在目錄開(kāi)始計(jì)算，無(wú)論引入的文件是js還是css還是圖片還是其他任何類(lèi)型坷襟。
如果是在HTML文件內(nèi)書(shū)寫(xiě)“行內(nèi)js”和“行內(nèi)css”奸柬，里面的相對(duì)路徑當(dāng)然也是相對(duì)于HTML文件的，畢竟沒(méi)有別的參照物婴程。
CSS文件代碼中的相對(duì)路徑
CSS文件中寫(xiě)相對(duì)路徑的情況主要是設(shè)背景圖和引入字體文件廓奕，測(cè)試步驟：
準(zhǔn)備一個(gè)字體文件，可以隨便下載一個(gè)，比如李旭科書(shū)法桌粉。
準(zhǔn)備目錄/a/b/c/d蒸绩，1.css放在a目錄，字體放在b目錄铃肯，1.html依然在d目錄患亿。
1.html文件內(nèi)容：
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/a/1.css">
<p class="a">李旭科書(shū)法</p>
1.css文件內(nèi)容，'./b/lxksf.ttf'表示從a目錄開(kāi)始找b目錄押逼，然后發(fā)現(xiàn)這個(gè)ttf文件：
@font-face {
font-family: 'a';
src: url('../b/lxksf.ttf');
}
.a {
font-family: 'a';
}
還是訪問(wèn)http://localhost/a/b/c/d/1.html步藕，可以看到，p元素成功應(yīng)用了字體挑格。
結(jié)論：CSS文件內(nèi)如果寫(xiě)相對(duì)路徑咙冗，是基于CSS文件本身的，跟誰(shuí)引入了這個(gè)CSS無(wú)關(guān)漂彤。
JS文件代碼中的相對(duì)路徑
測(cè)試思路是雾消，讓1.html ajax 2.html。
還是構(gòu)建/a/b/c/d/目錄显歧，1.html放到d里仪或，2.html放到c里，1.js放到a里士骤。
1.html內(nèi)容：
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="../../../1.js"></script>
2.html內(nèi)容：
<strong>測(cè)試成功</strong>
1.js內(nèi)容：
$.get('../2.html', function(data) {
console.log(data);
});
然后還是訪問(wèn)http://localhost/a/b/c/d/1.html，在控制臺(tái)可以看到蕾域，成功了：
結(jié)論：JS文件內(nèi)的相對(duì)路徑拷肌，也是從HTML文件所在位置開(kāi)始計(jì)算的，跟js文件在哪無(wú)關(guān)旨巷。
總結(jié)
- HTML文件和JS文件中出現(xiàn)的相對(duì)路徑巨缘，都是從HTML文件所在位置開(kāi)始計(jì)算的。
- CSS文件中出現(xiàn)的相對(duì)路徑采呐，是從CSS文件所在位置開(kāi)始計(jì)算的若锁。
怎么理解這種設(shè)定？
當(dāng)初創(chuàng)世者怎么考慮的斧吐，咱們不去探討又固，只是感受一下這種設(shè)定的好處：
JS因?yàn)橛辛诉@種設(shè)定，就可以實(shí)現(xiàn)瀏覽器的同源限制煤率。
JS文件是為HTML服務(wù)的仰冠，以HTML為核心更科學(xué)，而且除了ajax場(chǎng)合蝶糯，JS文件里很少寫(xiě)相對(duì)路徑洋只。
而CSS文件，它大多是資源引用，比如引用img和字庫(kù)和svg等识虚，這些文件是為CSS服務(wù)的肢扯，它們跟css配合形成了一個(gè)整體，所以担锤，當(dāng)然應(yīng)該相對(duì)于CSS文件所在位置進(jìn)行計(jì)算鹃彻。假如相對(duì)于HTML文件位置做計(jì)算，那就真亂套了妻献。
