1.樣式有幾種引入方式诊沪？link和@import有什么區(qū)別
有5種寫入樣式方式：
1.行內(nèi)式斥杜，在html元素標(biāo)簽中使用style屬性來(lái)規(guī)定樣式依疼。
<p style="color:red">行內(nèi)式</p>
2.嵌入式膏燕，在head元素中使用style標(biāo)簽，對(duì)整個(gè)頁(yè)面中的各個(gè)元素進(jìn)行設(shè)置屹蚊。
<head>
<style type="text/css">
p {
color: red;
}
</style>
</head>
3.鏈入外部樣式厕氨，使用link標(biāo)簽來(lái)引入一個(gè)外部樣式表，也就是css文件汹粤。
<head>
<meta charset="UTF-8">
<title>饑人谷</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
4.導(dǎo)入式命斧，使用@import導(dǎo)入外部樣式表。
<style type="text/css">
@import "demo.css";
</style>
link和@import有什么區(qū)別
- 最主要的區(qū)別：link是XHTML標(biāo)簽嘱兼，除了加載css外国葬，還可以定義RSS，定義rel鏈接屬性等，@import屬于css范疇汇四，只能加載css接奈。
- 加載順序的區(qū)別：link引入css時(shí)，在頁(yè)面加載時(shí)同時(shí)加載通孽，@import需要在網(wǎng)頁(yè)完全載入以后加載序宦。所以說(shuō)一直有一個(gè)觀點(diǎn)就是為了提高web網(wǎng)頁(yè)性能，讓用戶得到更快的頁(yè)面顯示背苦，不要使用@import而去使用link互捌。
- 兼容性的區(qū)別：link是XHTML標(biāo)簽，無(wú)兼容性的問(wèn)題行剂，@import是在CSS2.1提出的秕噪，低版本的瀏覽器不支持。
- 使用dom控制樣式的區(qū)別：link支持使用javascript控制DOM去改變樣式厚宰，而@import不支持腌巾。
2.文件路徑.../main.css、./main.css铲觉、main.css有什么區(qū)別澈蝙？
../main.css表示打開上一級(jí)目錄下的main.css文件。
./main.css和main.css表示的意思是一樣备燃，都是打開當(dāng)前目錄下的main.css文件碉克。
3.console.log 是做什么用的？
console.log的功能是在控制臺(tái)打印出你想要的數(shù)據(jù)并齐，相對(duì)于alert(),它不會(huì)打斷你javascript程序的執(zhí)行漏麦，是一種更好的javascript程序的調(diào)試方式。
關(guān)于console.log的使用以及javascript的調(diào)試還不是很了解况褪，先分享一個(gè)博客Chome開發(fā)者工具不完全指南（二撕贞、進(jìn)階篇）,在以后的學(xué)習(xí)中再慢慢熟悉開發(fā)者工具。
4.text-align 有幾個(gè)值测垛，分別有什么作用捏膨？
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。
| 值 | 描述 |
|---|---|
| left | 把文本排列在左邊 |
| right | 把文本排列在右邊 |
| center | 把文本排列在中間 |
| justify | 實(shí)現(xiàn)兩端對(duì)齊本文效果 |
| inherit | 規(guī)定應(yīng)該從父元素繼承text-align屬性的值食侮。 |
| 默認(rèn)值 | 如果 direction 屬性是 ltr号涯，則默認(rèn)值是 left；如果 direction 是 rtl锯七，則為 right链快。 |
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
代碼測(cè)試如下：
在測(cè)試的時(shí)候發(fā)現(xiàn)
text-align: justify;出現(xiàn)了問(wèn)題眉尸，直接使用這段代碼并沒(méi)有生效域蜗。后來(lái)參考了大漠的這篇文章Text-align:Justify和RWD,使用偽類：after解決了問(wèn)題巨双。關(guān)于這段偽類代碼我是這么理解的：使用偽類after創(chuàng)建了一個(gè)content屬性為空白的內(nèi)聯(lián)塊元素，由于這個(gè)元素的width為100%霉祸，它會(huì)導(dǎo)致一個(gè)換行符出現(xiàn)筑累，這樣一來(lái)它前面的內(nèi)容就實(shí)現(xiàn)了兩端對(duì)齊。
這種方法是文章中作者推薦的丝蹭，更簡(jiǎn)潔更有語(yǔ)義慢宗。
5.px、em半夷、rem分別是什么婆廊？有什么區(qū)別迅细？如何使用巫橄？
- px，是一種像素尺寸茵典，在html可以直接用來(lái)指定字體的大小湘换，假設(shè)一個(gè)字體的高度為14像素，這說(shuō)明字母的最低部分和最高部分之間有14像素统阿。
- em,類似于百分?jǐn)?shù)彩倚，是一個(gè)相對(duì)度量單位，使用em時(shí)扶平，要指定一個(gè)比例因子帆离，就像這樣：
font-size:1.2em;
這表示該元素的字體大小是它父元素的字體大小的1.2倍。
- rem结澄，是css3中增加的相對(duì)度量單位哥谷，是相對(duì)于根元素(即html元素)計(jì)算值的倍數(shù)。
注意：瀏覽器默認(rèn)的字體大小是16px麻献。
他們的區(qū)別在于px的值是固定的们妥，而em、rem的值是相對(duì)的勉吻。em是相對(duì)于父元素监婶，而rem是相對(duì)于根元素。
使用方法用一段代碼表示：
6.對(duì)chrome 審查元素的功能做個(gè)簡(jiǎn)單的截圖介紹
7.如下代碼齿桃，設(shè)置 p 為幾 rem惑惶，讓 h1 和 p 的字體大小相等?
瀏覽器的默認(rèn)字體大小是16px，所以html的字體大小是16*62.5%=10px短纵，所以p為6rem情況下可以讓h1與p的字體大小相等带污。
本教程版權(quán)歸饑人谷_任磊和饑人谷所有，轉(zhuǎn)載須說(shuō)明來(lái)源踩娘。
