CSS当中的相对路径和绝对路径

html-css031

CSS当中的相对路径和绝对路径,第1张

"." 代表当前所在目录， 相对路径 。如:<a href="./abc">文本</a>或<img src="./abc" />；

".." 代表上一层目录， 相对路径 。如:<a href="../abc">文本</a>或<img src="../abc"/>；

"../../" 代表的是上一层目录的上一层目录，相对路径。 如:<img src="../../abc" />；

"/" 代表根目录, 绝对路径 。 如：<a href="/abc">文本</a>或<img src="/abc"/>；

"D:/abc/" 代表根目录, 绝对路径 。

在使用相对路径时，我们用符号“.”来表示 当前目录 ；用符号“..”来表示 当前目录 的父目录。

如果是外联css（css文件与html文件分离的），则css中的图片路径是相对于css文件而不是html文件的，比如你附图中的那个png图片，应该位于css文件的上级目录的images子目录的kpjh子目录中，否则就出错。如果网站的目录结构比较复杂，很难理清文件的相对关系，可以使用绝对路径，比如说images目录假如位于网站的根目录，那么你可以用 /images/kpjh/... ，也就是把开头的两个小数点去掉。更保险的办法是在前面加上网址变成完整的url，这样即使图片文件放到其他网站也能调用。如果希望得到更简单的方法，那么可以把css文件与图片文件放在同一个目录，这样css文件中就不需要再写图片的路径了，直接写图片文件名即可！

如果是内联css（css代码直接写到html文件中），则图片路径是相对于html文件的。

所以你要自己检查一下图片路径是否写正确，然后根据我上面的说明进行修改。

绝对路径顾名思义，填写绝对目录路径地址那就叫绝对路径，通常我们直接使用"/"代表从根目录开始的目录路径，这个叫绝对路径。

相对路径顾名思义，填写目录时候以填写目录文件为参考，使用“../”或"./"指向上一级 或 使用"../../"指向上上一级叫相对路径。

其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。

相对路径与绝对路径与CSS关系？

1、我们在CSS中引入图片地址的时候就可能用到相对路径与绝对路径。

2、我们在DIV+CSS的html中在HTML引入CSS文件、引入添加图片的时候 就会用到相对路径与绝对路径。