1. 樣式有幾種引入方式? link 和 @import有什么區(qū)別
- 三種引入方式：
外部引入css文件：
<link rel="stylesheet" type="text/css" href="demo.css" />
內(nèi)部：
- head標(biāo)簽內(nèi)：<br />
<style type="text/css"> p { color:red; } </style>
-
html標(biāo)簽內(nèi)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>風(fēng)骨來客</title>
</head>
<body>
<h3 style="color:blue;">我是一個3級標(biāo)題</h3>
</body>
</html>
link和@import有什么區(qū)別
- link可以放在文檔任何位置碱屁，通常情況下放在head標(biāo)簽內(nèi)。
@import 和link的使用方法差不多蛾找，但是 @import必須放在<style>..</style>標(biāo)簽內(nèi)使用娩脾。
eg:
<style type="text/css"> @import url(css/demo.css); </style>
注: 末尾的；號必須寫打毛，而且為英文狀態(tài)的柿赊。- 1.link屬于html標(biāo)簽，而@import完全是css提供的一種方式幻枉。
link標(biāo)簽除了可以加載css外碰声，還可以做很多其它的事情，比如定義RSS熬甫，定義rel連接屬性等胰挑，@import就只能加載css了。- 2.加載順序的差別椿肩。
link引用的CSS會同時被加載瞻颂，而@import引用的CSS會等到頁面全部被下載完再被加載。- 3.兼容性差別郑象。
@import是css2.1提出的所以老的瀏覽器不支持贡这，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題厂榛。- 4.使用dom控制樣式時的差別盖矫。
當(dāng)使用javascript控制dom去改變樣式的時候丽惭，只能使用link標(biāo)簽，因為@import不是dom可以控制的炼彪。- 5.@import可以在css中再次引入其他樣式表吐根，比如可以創(chuàng)建一個主樣式表，在主樣式表中再引入其他的樣式表辐马，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
這樣更利于修改和擴(kuò)展拷橘。
風(fēng)骨提示：這樣做有一個缺點，會對網(wǎng)站服務(wù)器產(chǎn)生過多的HTTP請求喜爷，以前是一個文件冗疮，而現(xiàn)在卻是兩個或更多文件了，服務(wù)器的壓力增大檩帐，瀏覽量大的網(wǎng)站還是謹(jǐn)慎使用术幔。像新浪等網(wǎng)站的首頁或欄目首頁代碼，他們總會把css或js直接寫在html 里湃密，而不用外部文件诅挑，方便加載，減輕服務(wù)器壓力泛源。
2. 文件路徑../main.css 拔妥、./main.css、main.css达箍、/main.css有什么區(qū)別
../main.css:當(dāng)前層級的上一個層級尋找main.css
./main.css:當(dāng)前層級尋找main.css
main.css:當(dāng)前層級尋找main.css
/main.css：根目錄引入main.css 根目錄參考資料
3. console.log是做什么用的
用來分析和調(diào)試的一個JS函數(shù)没龙，可以在瀏覽器的開發(fā)工具控制臺中使用，改變參數(shù)值缎玫，調(diào)試和完善頁面硬纤。
參考資料
4. text-align有幾個值，分別有什么作用赃磨？寫截圖說明區(qū)別
值 | 作用 |
--- | ---- | ---
left | 文本左對齊
right | 文本右對齊
center | 文本居中對齊
justify | 文本兩邊對齊
截圖說明：
QQ20160816-0@2x.png
QQ20160816-1@2x.png
5. px筝家、em、rem分別是什么邻辉？有什么區(qū)別溪王？如何使用
|說明|
---|----
px| pixel：像素，是屏幕上顯示數(shù)據(jù)的最基本的點恩沛，表示相對大小在扰，比較常用和穩(wěn)定
em| 相對長度單位，em是基于父級元素font-size的
rem| css3新增的一個相對單位雷客，它只對于html根元素起效果(在body標(biāo)簽里面設(shè)置字體大小不起作用)芒珠。<br />補(bǔ)充：默認(rèn)font-size大小是16px(如果html中沒有設(shè)置的話)
6. 對chrome 審查元素的功能做個簡單的截圖介紹
-
鼠標(biāo)雙擊→檢查→打開控制臺
D3EE2F96-91D6-45EB-B690-3980C6AC6B1C.png
CA254F7B-1D71-4202-AC83-AF22804AE97B.png - 點擊頁面控制臺展示對應(yīng)代碼→修改參數(shù)→調(diào)試預(yù)覽
- 切換PC 和 移動端顯示預(yù)覽
- Element：html結(jié)構(gòu)，操作dom樣式搅裙、結(jié)構(gòu)皱卓、時間的顯示面板
- Resources：本界面所加載的資源列表裹芝。還有cookie和local storage 、SESSION 等本地存儲信息娜汁，在這里嫂易，我們可以自由地修改、增加掐禁、刪除本地存儲
- Source：出現(xiàn)問題時怜械，進(jìn)行js斷點調(diào)試
- Console：輸出你自己代碼。它可以配合其他面板一起使用傅事。點擊右上角的>_剪頭可以啟用或者收起它缕允。
7.如下代碼，設(shè)置 p為幾 rem蹭越，讓h1和p的字體大小相等?
答: 6rem
6BED59FD-AA84-40BE-854F-2BC01FA4A7E3.png瀏覽器的默認(rèn)高度一般為16px障本；
為什么用62.5%作為html的默認(rèn)樣式? →16px62.5%=10px，設(shè)了62.5%后就有1rem = 10px
參考資料
8. 代碼
1,設(shè)置body的字體為微軟雅黑响鹃，字號16px驾霜， 行高1.5倍，字體顏色 #333
2,設(shè)置段落顏色#000, 首行縮進(jìn)兩個字體寬度买置，1.5倍行高
git提交到github
本文章著作權(quán)歸（風(fēng)骨來客qq:2361597776）和饑人谷(QQ 群: 222459918) 所有粪糙，轉(zhuǎn)載須說明來源
