1.樣式有幾種引入方式?link和@import有什么區(qū)別
①最常用的方式，引入樣式表。在外部創(chuàng)建一個(gè)樣式表（xxxx.css)，在此樣式表中編寫(xiě)樣式，然后在html中引入樣式，一般來(lái)說(shuō)要?jiǎng)?chuàng)建一個(gè)單獨(dú)的css文件夾來(lái)存放css樣式表，引入方式如下：
<link href="css/xxxx.css" rel="stylesheet"type="text/css">
這種方式一般放在<head>中，優(yōu)點(diǎn)就是在于可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個(gè)樣式檔案中，便于日后的修改維護(hù)，缺點(diǎn)是在個(gè)別文件或元件的靈活度不足，會(huì)在href的請(qǐng)求過(guò)程中對(duì)服務(wù)器造成一定壓力。
Ps：
瀏覽器一般會(huì)默“index.html"為初始頁(yè)面，所以一般將初始頁(yè)面名稱(chēng)設(shè)置為這個(gè)，這樣，在進(jìn)入這個(gè)頁(yè)面的時(shí)候，就不需要多輸入“www.xxxxxx.com/index.html"
②在Html中用<head>包起來(lái)，在這里面編寫(xiě)樣式：
<head>
<style type="xxxx/css">
body {
? ? ? 樣式規(guī)則表
}
</style>
</head>
將樣式表寫(xiě)于<head>，這種方式的缺點(diǎn)是不便于維護(hù)，推薦在只有本頁(yè)面會(huì)使用的唯一樣式中使用這種方法。
③在標(biāo)簽里面直接編寫(xiě)行內(nèi)樣式：
使用STYLE屬性，將STYLE屬性直接加在個(gè)別的元件標(biāo)簽里。
<元件(標(biāo)簽) style="性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定值2; ...>
例：
<body>
? ? ? ?<p style="color:blue;font-size:9px;font-family:"微軟雅黑”；line-height:1.5>
? ? ? ? </p>
</body>
這種方式只對(duì)當(dāng)前元素有效。
④使用@import引入：?
跟link用法很像，但必須包含在<style>...</style>中。
<style type="text/css">
? ? @import url=(引入的樣式表路徑、名稱(chēng));
</style>
例：
<style type="text/css">
? ? ?@import url(http://css/xxxx.css);
</style>
注意：行末的分號(hào)必不可少的。
link和@import都是外部引用CSS的方式，但是存在一定的區(qū)別：
區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
區(qū)別2：link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
區(qū)別3：link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區(qū)別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
@import最優(yōu)寫(xiě)法:
@import的寫(xiě)法一般有下列幾種：
1.@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識(shí)別
2.@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識(shí)別
3.@import url(style.css) //Windows NS4, Macintosh NS4不識(shí)別
4.@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識(shí)別
5.@import url("style.css") //Windows NS4, Macintosh NS4不識(shí)別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優(yōu)的選擇，兼容的瀏覽器最多。從字節(jié)優(yōu)化的角度來(lái)看@import url(style.css)最值得推薦。
2.文件路徑 ../main.css、./main.css、main.css有什么區(qū)別
../main.css是指上一級(jí)目錄中的css文件
./main.css是指本目錄中的css文件，”./"可以省略，所以“./main.css”與“main.css"代表的意義相同
引申：絕對(duì)路徑與相對(duì)路徑的區(qū)別
絕對(duì)路徑：
平時(shí)使用計(jì)算機(jī)時(shí)要找到需要的文件就必須知道文件的位置，而表示文件的位置的方式就是路徑，例如只要看到這個(gè)路徑：c:/website/img/photo.jpg我們就知道photo.jpg文件是在c盤(pán)的website目錄下的img子目錄中。這樣完整的描述文件位置的路徑就是絕對(duì)路徑。我們不需要知道其他任何信息就可以根據(jù)絕對(duì)路徑判斷出文件的位置。
相對(duì)路徑：
所謂相對(duì)路徑，顧名思義就是自己相對(duì)與目標(biāo)位置。不論將這些文件放到哪里，只要他們的相對(duì)關(guān)系沒(méi)有變，就不會(huì)出錯(cuò)。
我們使用“../”來(lái)表示上一級(jí)目錄，“../../”表示上上級(jí)的目錄，以此類(lèi)推。
例：
比方C盤(pán)ABC文件夾有個(gè)1文件,還有一個(gè)DEF文件夾,而DEF文件下有個(gè)2文件.
那1和2的文件路徑分別為:(都是絕對(duì)路徑)
C:\ABC\1
C:\ABC\DEF\2
如果讓1文件來(lái)表示2文件的路徑
絕對(duì)路徑: C:\ABC\DEF\2
相對(duì)路徑: DEF\2 (因?yàn)?和2文件前面的C:\ABC這段路徑相同就不用寫(xiě)出來(lái)了)。
3.console.log是做什么用的
主要是方便調(diào)式j(luò)avascript?？梢钥吹侥阍陧?yè)面中輸出的內(nèi)容。
相比alert他的優(yōu)點(diǎn)是：
console能看到結(jié)構(gòu)話(huà)的東西，如果是alert，彈出一個(gè)對(duì)象就是[object object],但是console能看到對(duì)象的內(nèi)容。
console不會(huì)打斷你頁(yè)面的操作，如果用alert彈出來(lái)內(nèi)容，如果不先點(diǎn)彈出框，整個(gè)頁(yè)面就會(huì)卡死，無(wú)法進(jìn)行其他動(dòng)作，但是console輸出內(nèi)容后你頁(yè)面還可以正常操作。
4.text-align有幾個(gè)值，分別有什么作用
①left? 把文本排列到左邊。
②right? 把文本排列到右邊。
③center? 把文本排列到中間。
④justify ?實(shí)現(xiàn)兩端對(duì)齊效果,在一行文字較多時(shí)，使用此效果，可以使文字較為均勻的分布于行內(nèi)，由于字?jǐn)?shù)較多，字間距較小，視覺(jué)效果可以忽略。
5.px、em、rem分別是什么？有什么區(qū)別？如何使用
①px像素（Pixel） 相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
②rem 是相對(duì)于HTML根元素的相對(duì)長(zhǎng)度單位。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
③em 是相對(duì)長(zhǎng)度單位，在html中是根據(jù)其父級(jí)元素為標(biāo)準(zhǔn)的。這個(gè)單位過(guò)于靈活，只要有一個(gè)父單位被改變，此單位就會(huì)隨之改變，所以一般來(lái)說(shuō)用的少一些。
6.chrome 審查元素功能簡(jiǎn)單的截圖介紹
7.如下設(shè)置p為幾個(gè)rem，讓h1和p的字體大小相等？
瀏覽器默認(rèn)字體大小是16px，h1的字體大小是60px，則16×0.625×?=60px。解出來(lái)為6，所以是6rem。
本教程版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載須說(shuō)明來(lái)源
