一.樣式有幾種引入方式? link 和 @import有什么區(qū)別
樣式有三種引入方式
1.內(nèi)部引入
<style>
p{
background-color: yellow;
}
</style>
注：寫(xiě)在head標(biāo)簽里
2.內(nèi)聯(lián)式
<p style="border: 3px solid #fff; border-radius: 3px;">內(nèi)容</p>
注：寫(xiě)在具體的元素標(biāo)簽里
3.外部引入（link, import）
<link rel="stylesheet" href="index.css">
@import url(./index.css);
注：寫(xiě)在head標(biāo)簽里
link與import區(qū)別
1.link會(huì)在頁(yè)面顯示之前全部加載完，import是在文件讀取完之后才加載。在網(wǎng)絡(luò)環(huán)境差的情況下，import的使用可能會(huì)出現(xiàn)瞬間沒(méi)有樣式，而后再會(huì)刷出有樣式的頁(yè)面。
2.@import可能低版本的瀏覽器會(huì)有不支持的情況。
3.使用dom控制樣式時(shí)的差別。當(dāng)使用js控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。
4.大部分都通用的地方，用link來(lái)做比較適合，import用到具體的元素樣式里，更為靈活
二.文件路徑../main.css 、./main.css、main.css、/main.css有什么區(qū)別
../ 是指上一級(jí)目錄 ./是當(dāng)前目錄
- ../main.css 上一級(jí)目錄
- ./main.css 當(dāng)前目錄
- main.css 當(dāng)前目錄
- /main.css 根目錄
三.console.log是做什么用的
console.log: 打印日志。主要用于調(diào)試信息。console.log能將json格式里的具體數(shù)據(jù)打印出來(lái)，非常便于調(diào)試
四.text-algin
text-align: left; //左對(duì)齊
text-align: right; //右對(duì)齊
text-align: center; //居中對(duì)齊
text-align: justify; //兩端對(duì)齊
再來(lái)看看justify屬性。一般情況下，在全英文或者全中文的時(shí)候，使用justify是很好用的，但是突然我想寫(xiě)一段有中文英文等的文字之后，發(fā)現(xiàn)justify并沒(méi)有起作用了，準(zhǔn)確說(shuō)是英文起作用，但是中文確沒(méi)有起作用。這是為什么呢？因?yàn)?em>justify這個(gè)屬性起作用的原理就是把每個(gè)單詞中的空格做伸縮，來(lái)達(dá)到對(duì)齊效果。此時(shí)，英文中檢測(cè)到有空格，但是中文并沒(méi)有空格，所以對(duì)中文不起作用了。要解決這個(gè)問(wèn)題，可以借助js代碼先在文本中添加空格，然后再刪除空格來(lái)實(shí)現(xiàn)。"這里是文本的啊".split("").join(" ") 具體代碼如下：
html:
<p id="txt">Life is a horse, and either you ride it or it rides you.人生像一匹馬，你不駕馭它,它便駕馭你。</p>
js:
var txt = document.getElementById("txt");
txt.style.textAlgin = "justify";
txt.style.letterSpacing = "-.15em"; //根據(jù)不同字體可設(shè)置不同的值
txt.innerHTML = txt.innerHTML.split("").join(" ");
五.px,em,rem
px:具體的像素?cái)?shù)值單位，不受任何影響。
em:相對(duì)單位，相對(duì)于父元素一倍的大小。如果父元素還有嵌套，則根據(jù)父元素所受到的大小變化。
rem:相對(duì)于html的根元素一倍的大小。只受html根元素的影響。
使用 em 和 rem 單位可以讓我們的設(shè)計(jì)更加靈活，能夠控制元素整體放大縮小，而不是固定大小。
