1.line-height 有什么作用？
line-height 屬性設(shè)置了行間的距離（即行高），不允許使用負(fù)值。“行高”指一行文字的高度，指兩行文字間基線之間的距離，行高的表示方式有五種分別為：px/em，normal，百分值，數(shù)值以及 inherit 值。
① px/em 不推薦。文章字體有大有小i，使用 px 定值，由于繼承性，無(wú)法實(shí)現(xiàn)根據(jù)文字大小自動(dòng)調(diào)整間距。
② normal 不推薦。一般瀏覽器的 normal 值在1~1.2之間，而文章顯示最佳為650像素，1.5倍行距，所以并不合適。
③ 百分值 也是有繼承性的，但是可以通過(guò)通配符來(lái)實(shí)現(xiàn)文件間距自動(dòng)適應(yīng)于文字大小。例如：<code>.article_box *{line-height:150%;}</code>
④ 數(shù)值 推薦。百分值與數(shù)值的區(qū)別在于繼承性，使用百分值會(huì)計(jì)算 line-height 的值，然后以 px 像素為單位繼承下去，而數(shù)值則是先繼承數(shù)值本身的數(shù)，到了該標(biāo)簽再去計(jì)算 line-height 的像素值。例如：.article_box{line-height: 1.5;}
行高具有垂直居中性，line-height 的最終表現(xiàn)是通過(guò) line boxes 實(shí)現(xiàn)的，但無(wú)論 line boxes 所占據(jù)高度是多少，其占據(jù)空間都是與文字內(nèi)容公用水平中垂線的。這邊我主要介紹兩種圖片垂直居中的方法，而還有幾種方法可以在該網(wǎng)頁(yè)找到方法：大小不固定的圖片、多行文字的水平垂直居中
① display:table-cell 和文字大小控制居中
這也是若愚老師在視頻中介紹的方法，其原理就是讓我們的 div 以表格方式來(lái)進(jìn)行渲染。而默認(rèn)表格方式的目的在于，垂直居中的 vertical-align:middle在表格中默認(rèn)就有，而我們放入圖片要運(yùn)用到水平居中與垂直居中。
② display:inline-block 和文字大小控制居中
這種方式我們將使用 a 標(biāo)簽來(lái)進(jìn)行，a 標(biāo)簽?zāi)J(rèn) inline 屬性設(shè)置為 inline-block 屬性，這樣 a 標(biāo)簽既支持寬度有支持 vertical-align:middle，配合 img 的 vertical-align:middle 就可以實(shí)現(xiàn)圖片的水平垂直居中。
2.如何去查 CSS 屬性的兼容性？比如 inline-block 哪些瀏覽器支持？
CSS屬性的兼容性我們可以通過(guò) Can I use 這個(gè)網(wǎng)站去查詢，我們舉一個(gè) inline-block 的例子，如下圖：
3. a 標(biāo)簽的 href, title, target 是什么？ title 和 alt 有什么區(qū)別？如何新窗口打開(kāi)鏈接?
① a 標(biāo)簽定義超鏈接，用于從一張頁(yè)面鏈接到另一張頁(yè)面。href 規(guī)定鏈接指向的頁(yè)面的 URL；title 屬性常與 form 以及 a 元素一同使用，以提供關(guān)于輸入格式和鏈接目標(biāo)的信息；target 規(guī)定在何處打開(kāi)鏈接文檔。
② title 和 alt 有什么區(qū)別？（資料摘自html中的alt和title用法區(qū)別）
alt 是 html 標(biāo)簽的屬性，而 title 既是 html 標(biāo)簽，又是 html 屬性。
title 標(biāo)簽就是 <title></title> 這對(duì)標(biāo)簽。title作為屬性時(shí)，用來(lái)為元素提供額外說(shuō)明信息。給超鏈接標(biāo)簽a添加了title屬性，把鼠標(biāo)移動(dòng)到該鏈接上面是，就會(huì)顯示title的內(nèi)容，以達(dá)到補(bǔ)充說(shuō)明或者提示的效果，當(dāng)a標(biāo)簽內(nèi)嵌套img標(biāo)簽時(shí)，起作用的是img的title屬性。
alt屬性則是用來(lái)指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁(yè)中圖片無(wú)法正常顯示時(shí)給用戶提供文字說(shuō)明使其了解圖像信息。注意，alt是替代圖像作用而不是提供額外說(shuō)明文字的。
③ 如何新窗口打開(kāi)鏈接？
使用 target 即可在新窗口打開(kāi)鏈接，例：<a href ="#" target= "-blank">
4. display: none, visibility: hidden, opacity:0 有什么作用？有什么區(qū)別？
display:none 和 visible:hidden 以及 opacity:0 都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)。但它們?nèi)哂袇^(qū)別：
display:none 是不為被隱藏的對(duì)象保留其物理空間，會(huì)改變頁(yè)面布局即該對(duì)象在頁(yè)面上徹底消失就像刪除了一樣。
visible:hidden 使對(duì)象在網(wǎng)頁(yè)上隱藏，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒(méi)有改變，不會(huì)改變頁(yè)面布局，但是不會(huì)觸發(fā)該元素已經(jīng)綁定的事件。
opacity:0 只是使得元素變得透明，但不會(huì)改變頁(yè)面布局，若該元素已經(jīng)綁定一些事件，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件。
我們可以很直觀地從下圖看到他們的不同區(qū)別：摘自 stackoverflow
5.如何去除 a 鏈接的默認(rèn)樣式？直接在 a 鏈接父容器添加顏色，能否繼承到當(dāng)前 a 鏈接上？
a 鏈接的默認(rèn)樣式：（摘自w3school）
①去除下劃線：在 css 的 a 標(biāo)簽中輸入
text-decoration:none;即可。②更改未被訪問(wèn)時(shí)的顏色：在 css 的 a 標(biāo)簽中輸入 color 更改即可。
③更改已被訪問(wèn)的顏色：在 css 中設(shè)置一個(gè)
a:visited中設(shè)置顏色即可改變。④更改活動(dòng)鏈接時(shí)的顏色：在 css 中單獨(dú)設(shè)置一個(gè)
a:hover，在其中設(shè)置顏色即可變色，其中 css3 中新增加有個(gè)transition:color 0.3s;這個(gè)屬性添加在 css 中的 a 標(biāo)簽中即可實(shí)現(xiàn)活動(dòng)鏈接的顏色改變時(shí)間，即漸變過(guò)程。
直接在 a 鏈接父容器添加顏色，能否繼承到當(dāng)前 a 鏈接上？
<!DOCTYPE html>
<html lang="en">
<head>
<title>task6</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.div1 {
color: red;
}
</style>
</head>
<body>
<div class="div1">div1
<p class="" p1>我是段落</p>
<a href="#">我是鏈接1</a>
</div>
<a href="#">我是鏈接2</a>
</body>
</html>```
這個(gè)代碼我們可以在瀏覽器得到如下結(jié)果，可以看出直接在 a 鏈接父容器添加顏色，不能繼承到當(dāng)前 a 鏈接上
但我們將代碼改成這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<title>task6</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.div1 {
color: red;
}
a {
color: pink;
}
</style>
</head>
<body>
<div class="div1">div1
<p class="" p1>我是段落</p>
<a href="#">我是鏈接1</a>
</div>
<a href="#">我是鏈接2</a>
</body>
</html>```
就可以得到如下，我們可以看到鏈接的顏色變化了，所以說(shuō)我們要改變 a 鏈接的顏色，得把 a 單獨(dú)列出來(lái)進(jìn)行編輯。
