1. 樣式有幾種引入方式? link 和 @import有什么區(qū)別？
- 外部樣式表：指在html文件的head標(biāo)簽中，使用link引用另一個(gè)css文件中定義的樣式。當(dāng)樣式需要被應(yīng)用到多個(gè)頁面的時(shí)候，外部樣式表將是理想的選擇谭网。
<html>
<title>renwu5</title>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body></body>
</html>
- 內(nèi)部樣式表：指在html文件的head標(biāo)簽內(nèi)聲明樣式。當(dāng)單個(gè)文件需要特別樣式時(shí)赃春，就可以使用內(nèi)部樣式表愉择。你可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<html>
<title>renwu5</title>
<head>
<style>
p {
color:red;
font-size:10px;
}
</style>
</head>
<body>
<p>css樣式</p>
</body>
</html>
- 內(nèi)聯(lián)樣式：當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)聘鳞，就可以使用內(nèi)聯(lián)樣式薄辅。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性要拂。樣式屬性可以包含任何 CSS 屬性抠璃。
<html>
<title>renwu5</title>
<head>
</head>
<body>
<p style="color: #fff">css樣式</p>
</body>
</html>
- @import導(dǎo)入式：
<style type="text.css">
@import url("style.css");
</style>
** link 和 @import有什么區(qū)別？**
- 根本的區(qū)別脱惰。link屬于XHTML標(biāo)簽搏嗡，而@import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情采盒，比如定義RSS旧乞，定義rel連接屬性等，@import就只能加載CSS了磅氨。
- 加載順序的區(qū)別尺栖。當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載烦租，而@import引用的CSS 會(huì)等到頁面全部被下載完再被加載延赌。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍），網(wǎng)速慢的時(shí)候還挺明顯叉橱。
- 兼容性的區(qū)別挫以。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別窃祝，而link標(biāo)簽無此問題掐松。
- 使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候粪小，只能使用link標(biāo)簽大磺，因?yàn)锧import不是dom可以控制的。
2. 文件路徑../main.css 探膊、./main.css量没、main.css有什么區(qū)別?
- ../main.css：指上一級(jí)目錄下的文件
- ./main.css：指當(dāng)前目錄下的文件，“./”也可以省略
- main.cs?s：指當(dāng)前目錄下的文件
3. console.log是做什么用的?
主要是方便調(diào)式j(luò)avascript用的突想，因?yàn)樗梢钥吹巾撁嬷休敵龅膬?nèi)容殴蹄。相比alert而言：它能看到結(jié)構(gòu)話的東西，如果是alert猾担，彈出一個(gè)對(duì)象就是[object object],但是console能看到對(duì)象的內(nèi)容袭灯。還有就是console不會(huì)打斷你頁面的操作，如果用alert彈出來內(nèi)容绑嘹，那么頁面就死了稽荧，但是console輸出內(nèi)容后你頁面還可以正常操作。
4. text-align有幾個(gè)值工腋，分別有什么作用姨丈？
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。該屬性通過指定行框與哪個(gè)點(diǎn)對(duì)齊擅腰，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式蟋恬。它的值有：left、center趁冈、right歼争、justify拜马、inherit。
left:實(shí)現(xiàn)文本居左顯示
center:實(shí)現(xiàn)文本居中顯示
right:實(shí)現(xiàn)文本居右顯示
justify:實(shí)現(xiàn)文本兩端對(duì)齊
inherit:規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值
5. px沐绒、em俩莽、rem分別是什么？有什么區(qū)別乔遮？如何使用扮超？
px，是一種像素尺寸蹋肮，在html可以直接用來指定字體的大小瞒津，假設(shè)一個(gè)字體的高度為16像素，這說明字母的最低部分和最高部分之間有16像素括尸。
em,類似于百分?jǐn)?shù)巷蚪，是一個(gè)相對(duì)度量單位，使用em時(shí)濒翻，要指定一個(gè)比例因子屁柏，如：font-size:1.2em;
這表示該元素的字體大小是它父元素的字體大小的1.2倍。這個(gè)單位過于靈活有送，只要有一個(gè)父單位被改變淌喻，此單位就會(huì)隨之改變，所以一般來說用的少一些雀摘。
rem裸删，是css3中增加的相對(duì)度量單位，是相對(duì)于根元素(即html元素)計(jì)算值的倍數(shù)阵赠。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身涯塔，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)清蚀。
6. 對(duì)chrome 審查元素的功能做個(gè)簡單的截圖介紹
7. 如下代碼匕荸，設(shè)置 p為幾 rem，讓h1和p的字體大小相等?
瀏覽器的默認(rèn)字體大小為16px,那么HTML字體大小為：62.5%×16=10px枷邪，10×榛搔？=60px,所以當(dāng)p為6rem時(shí),p 和h1字體大小相等。
本教程版權(quán)歸本人和饑人谷所有东揣，轉(zhuǎn)載須說明來源
