1.樣式有幾種引入方式? link 和 @import有什么區別？

①css的引入一般有3種，分別為：
（1）外部資源引入

<link rel="stylesheet" type="text/css" href="xxx.css">

（2）內部style標簽

<style type="text/css">
div
{ 
color: red; font-size:12px; 
} 
</style>

（3）內聯style屬性

<div style="color:red; font-size:12px;">123</div>

②
差別1：link屬于XHTML標簽，而@import完全是CSS提供的一種方式。
link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。

差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。

差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。

2.文件路徑../main.css 、./main.css、main.css、/main.css有什么區別?

• ../main.css表示上一級目錄下的css文件；
• ./main.css和main.css表示當前目錄下的css文件；
• /main.css表示磁盤根目錄

3.console.log是做什么用的？

console 控制臺
log 日志
意思是在控制臺輸出日志信息,控制臺也叫開發者工具,是瀏覽器的一部分，便于開發者調試用的。

4.text-align有幾個值，分別有什么作用？為什么text-align:justify沒有效果？寫截圖說明區別。

①text-align的5個值：

justify差異

如圖所示，兩段顏色為深綠色darkgreen的段落同屬于class:"justify",都在css樣式里對text-align設置了"justify"即段落兩端對齊的屬性，但第一個沒有占滿一行內容的深綠色段落是直接顯示左對齊的樣式，并沒有顯示"justify"的效果，因為它沒有占滿一行內容，只有左邊對齊，右邊無法和任何內容對齊，但是第二段深綠色的片段占了3行內容，可以看到應用了"justify"參數后它的左右兩端都是對齊的。

5.px、em、rem分別是什么？有什么區別？如何使用？

IE無法調整那些使用px作為單位的字體大小；國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；Firefox能夠調整px和em，rem

• px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

• em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。em的值并不是固定的；em會繼承父級元素的字體大小。所以我們在寫CSS的時候，需要注意兩點：
  ①body選擇器中聲明Font-size=62.5%；
  ②將你的原來的px數值除以10，然后換上em作為單位。
  重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。

• rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小

• 選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。

6.對chrome 審查元素的功能做個簡單的截圖介紹。

chrome調試

代碼

代碼