1.樣式有幾種引入方式? link和 @import有什么區(qū)別
三種方式：
- 外部樣式表
<link rel="stylesheet" type="text/css" href="less/all.css" /> - 內(nèi)部樣式表
<style type="text/css">
body{
color: #000;
font-size: x-large;
}
</style>
- 內(nèi)斂樣式表
<div style="font-size: 16px;text-align: center;">
內(nèi)斂樣式測試
</div>
ps:推薦使用第一種方式，css好維護一些，總體利大于弊
link和 @import區(qū)別
- link是XHTML標簽，除了加載CSS外，還可以定義RSS、rel鏈接等其其它方面；@import屬于CSS范疇，只能加載CSS。
- link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載，有可能出現(xiàn)閃的情況。
- link是XHTML標簽，沒有兼容性問題而@import是在CSS2.1提出的，低版本的瀏覽器不支持。
- link支持使用Javascript控制DOM去改變樣式而@import不支持這么做。
ps：@import最優(yōu)寫法為(兼容瀏覽器最多)
@import url(style.css)
@import url("style.css") //從字節(jié)優(yōu)化的角度來看更佳
2.文件路徑../main.css 、./main.css、main.css有什么區(qū)別
- ../main.css 表示父目錄路徑
- ./main.css 表示當前路徑
- main.css 表示當前路徑，也表示當前路徑文件
3.console.log是做什么用的
- js調(diào)試信息輸出到控制臺
- 可以輸出js對象結(jié)構(gòu)化的信息
- 不會阻斷js程序運行
4.text-align有幾個值，分別有什么作用
有5個值，分別為：
- left （默認值）實現(xiàn)元素中的文本左對齊
- center 實現(xiàn)元素中的文本居中對齊
- right 實現(xiàn)元素中的文本右對齊
- justify 實現(xiàn)元素中的文本兩端對齊
- inherit 從父元素繼承 text-align 屬性的值
5.px、em、rem分別是什么？有什么區(qū)別？如何使用
- px、em、rem分別是
px像素是一種相對長度單位，相對于顯示器分辨率
em也是一種相對長度單位，是相對于其父元素來設(shè)置字體大小
rem也是一種相對單位長度，相對于根元素<html>的單位 - 區(qū)別&使用
px為單位是比較方便，而且一致又穩(wěn)定和精確，但是是固定的。但存在當用戶在瀏覽器中瀏覽我們開發(fā)的網(wǎng)頁時，他重新設(shè)置了瀏覽器的字體大小時，會使我們的網(wǎng)頁布局被打亂，從而影響到布局。
em是相對于其父元素來設(shè)置字體大小的，靈活方便，但也存在一個麻煩的問題，進行任何元素設(shè)置，都有可能需要了解他父元素的大小，當我們多次使用時，就會存在潛在的錯誤風險。
rem借鑒兩者的優(yōu)點，既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的潛在風險
6.對chrome 審查元素的功能做個簡單的截圖介紹
B9FA36FA-C427-4156-B7AA-0BD91AC2B82B.png
7.如下設(shè)置p為幾個rem，讓h1和p的字體大小相等？
<h1>饑人谷</h1>
<p>饑人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
由于瀏覽器默認字體大小是16px，h1的字體大小是60px，根據(jù)rem的計算規(guī)則可得知 p的rem值＝60/(16*62.5%)=6。
** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！ **
