1. Q&A

** 1.line-height有什么作用?**

行高的作用之一是用于文本的垂直居中——設(shè)置line-height=height

border=10px和line-height=90px下的行內(nèi)框

【tip】

行內(nèi)框是無(wú)法直接顯示的，只能通過(guò)border側(cè)面烘托出行內(nèi)框區(qū)域
行內(nèi)框的高度就是行高
經(jīng)筆者親測(cè)，當(dāng)只設(shè)置字體高度而不設(shè)置行高的情況下，原則上行內(nèi)框是等于字體高度的，但是在chrome瀏覽器會(huì)出現(xiàn)行內(nèi)框增大的現(xiàn)象，具體解釋可能第二張圖：

另一種解釋是：瀏覽器在顯示的時(shí)候往往會(huì)有自己的表現(xiàn)形式，例如在Opera內(nèi)，行高將按照CSS定義的將行距除以2增加到內(nèi)容區(qū)域的上下兩邊，而IE和Firefox則不是完全平分

2.如何去查CSS熟悉的兼容性？比如inline-block哪些瀏覽器支持？

如上圖所示，inline-block這一CSS屬性的主流pc端和移動(dòng)端的瀏覽器的兼容情況一一羅列出來(lái)了。

3.a 標(biāo)簽的href, title, target 是什么？ title 和 alt有什么區(qū)別？如何新窗口打開鏈接?
Html的a標(biāo)簽是定義超鏈接，用于從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面

href規(guī)定鏈接的目的url，一般來(lái)說(shuō)：
- 未點(diǎn)擊的鏈接呈現(xiàn)藍(lán)色帶下劃線
- 鼠標(biāo)放在鏈接上呈現(xiàn)紅色
- 點(diǎn)擊鏈接后呈現(xiàn)紫色帶下劃線
title規(guī)定可以讓鼠標(biāo)懸停在超鏈接上的時(shí)候，顯示該超鏈接的文字注釋
target規(guī)定鏈接跳轉(zhuǎn)頁(yè)面的方式，默認(rèn)是在當(dāng)前頁(yè)面跳轉(zhuǎn)，還包括：
- _blank：跳轉(zhuǎn)到新建頁(yè)面
- _self:在當(dāng)前頁(yè)面跳轉(zhuǎn)
- _parent:在父框架集中打開被鏈接文檔
  _ _top:在當(dāng)前的整個(gè)瀏覽器窗口中打開所鏈接的文檔，因而會(huì)刪除所有框架
- framename:在指定的框架中打開被鏈接文檔
tiitle規(guī)定鼠標(biāo)浮動(dòng)到鏈接時(shí)顯示的提示信息，而alt是但頁(yè)面渲染失敗時(shí)的提示信息
新窗口打開鏈接方法：

4.display：none, visibility: hidden, opacity:0有什么作用？有什么區(qū)別？

display:none是最常用的隱藏元素的方法
- 元素使用該屬性將：不占據(jù)空間，無(wú)法點(diǎn)擊；
- 元素在頁(yè)面上將完全消失；
- 元素原本占據(jù)的空間被其他元素所占據(jù)，從而導(dǎo)致
  瀏覽器的重排和重繪；

上圖分別是display:none和未設(shè)置display:none的效果圖

visibility:hidden也是常用的隱藏元素的一種方法
- 元素在頁(yè)面消失，但仍然占據(jù)空間
- 只導(dǎo)致瀏覽器重繪不導(dǎo)致重排
- 適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景

上圖的第二個(gè)紅色框表示visibility:hidden，此時(shí)點(diǎn)擊第二個(gè)紅色框，控制臺(tái)是沒有信息輸出的，因?yàn)榘粹o及其功能已經(jīng)隱藏

opacity:0表示元素的透明度是完全透明，起到一種隱藏效果
- 與visibility:hidden類似，元素在頁(yè)面消失且仍然占據(jù)空間
- 但按鈕及其功能仍然存在，只是肉眼看不見

上面第一個(gè)紅色框使用的是opacity:0，在點(diǎn)擊第一個(gè)紅色框，控制臺(tái)是可以輸出信息1的

5.如何去除 a 鏈接的默認(rèn)樣式？直接在 a 鏈接父容器添加顏色，能否繼承到當(dāng)前 a 鏈接上？

無(wú)法繼承，這和CSS樣式層疊時(shí)的優(yōu)先級(jí)有關(guān)，a標(biāo)簽一般會(huì)有默認(rèn)顏色（藍(lán)色）或是通過(guò)a:link{color:顏色值}去設(shè)置a標(biāo)簽的顏色，當(dāng)父容器再次設(shè)置時(shí)，會(huì)被a標(biāo)簽中設(shè)定的顏色所覆蓋；
方法如下圖所示：

2. code

參考資料