1. line-height有什么作用?
line-height指定一行的行高,使用后會使文本在上下居中。 line-height的賦值有兩種方式,無單位的數字表示倍數。以px為單位的數字指定行高的像素值。當樣式里指定了一行的行高像素時，line-height應該等于指定的像素值。否則會造成文本不居中的情況。
要想更深入的了解它，就讓我們先來了解幾個基本知識：
頂線、中線、基線、底線
從上到下四條線分別是頂線、中線、基線、底線，很像才學英語字母時的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。
尤其記得基線不是最下面的線，最下面的是底線。
行高、行距與半行距
上圖中兩條紅線之間的距離就是行高（line-height），上一行的底線和下一行的頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之間的關系看圖片的右下角就一目了然了~
半行距 = （line-height - font-size）/2
當然，半行距也可能為負值（當line-height < font-size），這時候兩行之間就會重疊，如下圖所示：
4種box
要說的4種盒子分別是：inline box、line box、content area、containing box ~
inline box (行內框) 每個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，行內框的高度等于font-size，設定line-height時，行內框的高度不變，改變的是行距。
line box （行框） 行框是指本行的一個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的一個概念，無法顯示出來。行框高度等于本行中所有行內框高度的最大值。當有多行內容時，每一行都有自己的行框。
content area （內容區） 內容區是圍繞著文字的一種box，無法顯示出來，其高度取決于font-size
和padding
containing box containing box 是包裹著上述三種box的box，
基本概念搞明白了我們就可以說說本文的主角line-height屬性了。
取值
定義：line-height 屬性設置行間的距離（行高），不能使用負值。該屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
一般情況下，瀏覽器默認的line-height為1.2。可以自定義line-height 覆蓋這個初始值，那么該怎樣設置line-height呢？有以下5種方式：
| 值 | 描述 |
|---|---|
| normal | 默認。設置合理的行間距。 |
| number | 設置數字，此數字會與當前的字體尺寸相乘來設置行間距，即number為當前font-size的倍數。 |
| length | 設置固定的行間距。 |
| % | 基于當前字體尺寸的百分比行間距。 |
| inherit | 規定應該從父元素繼承 line-height 屬性的值。 |
貌似很簡單，但感覺沒什么用出的樣子，但是line-height是個可繼承屬性，它的繼承規則有那么一點點復雜。
繼承
需要提前說明的是：line-height的大小與font-size息息相關，除了指定line-height為多少px，剩下的設置方式都是基于font-size算出來的。 下面逐個講一講~
inherit 這個其實沒什么說的，繼承父元素line-height的值，所以父元素的是多少就是多少。 如果其后代元素不設置line-height 的話，也會是這個值。
length 假設設置 line-height 為20px，那么該行的該行的行高就是20px，與 font-size 無關，不會隨著 font-size 做相應比例的縮放。 這個長度值（20px）會被后代元素繼承，所有的后代元素會使用這個相同的、繼承的 line-height (20px)，除非后代元素設定 line-height 。
百分比 假設自身的 font-size 為16px，line-height 設為120%。那么其行高為：16 * 120% = 19.2px。即 line-height 是根據自身的 font-size 計算出來的。 子元素會繼承父元素的line-height，那么它繼承的是什么呢，百分比（120%）？還是19.2px？ 答案是后者，19.2px，即父元素line-height
計算后的最終值。normal line-height 設置為 normal 的時候，行高取決于瀏覽器的解析，一般是1.2。 與前面不同的是，line-height 設置為 normal 的元素，其子元素不再繼承其line-height計算后的最終值，而是根據子元素自身的 font-size 進行計算。見下表~
| element | font-size | line-height | 計算后的line-height |
|---|---|---|---|
| body | 16px | normal | 16px * 1.2 = 19.2px |
| h1 | 32px | normal | 32px * 1.2 = 38.4px |
可見，子元素隨著自身 font-size 的大小而做相應比例的縮放。
- 純數字 如果既想要 normal 的靈活，又想設置一個自定義的值，那就要用 純數字 啦~ 純數字方式與 normal 唯一的不同，就是數值的大小，純數字可以自己隨意設定，而 normal 的值是瀏覽器決定的。
| element | font-size | line-height | 計算后的line-height |
|---|---|---|---|
| body | 16px | 1.5 | 16px * 1.5 = 24px |
| h1 | 32px | 1.5 | 32px * 1.5 = 48px |
其后代元素會繼承這個數值（比如 1.5），然后根據自身的 font-size 算出自身的line-height。
總結如下：
| 設置方式 | line-height | 計算后的line-height | 子元素繼承的line-height |
|---|---|---|---|
| inherit | 父元素的line-height值 | 不用計算 | 父元素的line-height值 |
| length | 20px | 不用計算 | 20px |
| % | 120% | 自身font-size (16px) * 120% = 19.2px | 繼承父元素計算后的line-height值 19.2px，而不是120% |
| normal | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 繼承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px |
| 純數字 | 1.5 | 自身font-size (16px) * 1.5= 24px | 繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
那么，哪一種是最好的方式呢？ 一般來數，設置行高的值為 純數字 是最推薦的方式，因為其會隨著對應的 font-size 而縮放。
2. 如何去查CSS屬性的兼容性？比如inline-block哪些瀏覽器支持？
可以通過這個caniuse網站來查詢。
3. a 標簽的href, title, target 是什么？ title 和 alt有什么區別？如何新窗口打開鏈接?
a標簽的定義和用法
a標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。
a 元素最重要的屬性是 href 屬性，它指示鏈接的目標。
在所有瀏覽器中，鏈接的默認外觀是：
提示和注釋
提示：如果不使用 href 屬性，則不可以使用如下屬性：download, hreflang, media, rel, target 以及 type 屬性。
提示：被鏈接頁面通常顯示在當前瀏覽器窗口中，除非您規定了另一個目標（target 屬性）。
提示：請使用 CSS 來設置鏈接的樣式。
href屬性
a 標簽的 href 屬性用于指定超鏈接目標的 URL。
href 屬性的值可以是任何有效文檔的相對或絕對 URL，包括片段標識符和 JavaScript 代碼段。如果用戶選擇了 a 標簽中的內容，那么瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔，或者執行 JavaScript 表達式、方法和函數的列表。
- 語法：
<a href="value">
- 屬性值：
| 值 | 描述 |
|---|---|
| URL | 超鏈接的 URL。可能的值：絕對 URL - 指向另一個站點（比如 href="http://www.example.com/index.htm"） 相對 URL - 指向站點內的某個文件（href="index.htm"） 錨 URL - 指向頁面中的錨（href="#top"） |
title屬性
使用 title 屬性，可以讓鼠標懸停在超鏈接上的時候，顯示該超鏈接的文字注釋。
<a title = "中文開放目錄">分類目錄</a></html>
如果希望注釋多行顯示，可以使用"
";作為換行符。
<a title = "中文開放目錄 http://www.opendir.cn">分類目錄</a>
target屬性
a標簽的 target 屬性規定在何處打開鏈接文檔。
如果在一個a標簽內包含一個 target 屬性，瀏覽器將會載入和顯示用這個標簽的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或 id 的框架或者窗口不存在，瀏覽器將打開一個新的窗口，給這個窗口一個指定的標記，然后將新的文檔載入那個窗口。從此以后，超鏈接文檔就可以指向這個新的窗口。
- 語法：
<a target="value">
- 屬性值：
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打開被鏈接文檔。 |
| _self | 默認。在相同的框架中打開被鏈接文檔。 |
| _parent | 在父框架集中打開被鏈接文檔。 |
| _top | 在整個窗口中打開被鏈接文檔。 |
| framename | 在指定的框架中打開被鏈接文檔。 |
title和alt屬性的區別
- title屬性：title是為該屬性的元素提供建議性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。
當鼠標放置在選定元素時，大部分可視化瀏覽器會顯示title的提示信息。
title屬性有一個很好的用途，即為鏈接添加描述性文字，特別是當連接本身并不是十分清楚的表達了鏈接的目的。這樣就使得訪問者知道那些鏈接將會帶他們到什么地方，他們就不會加載一個可能完全不感興趣的頁面。另外一個潛在的應用就是為圖像提供額外的說明信息，比如日期或者其他非本質的信息。 - alt屬性：alt屬性只能用在img、area和input元素中，它是為了給那些不能看到文檔中圖像的瀏覽者提供文字說明信息，在圖片的位置顯示內容。
如何新窗口打開鏈接
利用a標簽中target的屬性值"_blank"即可實現。
<a href="#" target="_blank" title="在新窗口代開鏈接">鏈接</a>
4. display: none , visibility: hidden, opacity:0 有什么作用？有什么區別？
他們的作用都是讓元素消失，但是在渲染效果上有區別：
display: none：隱藏元素，并且脫離文檔流，下面的元素會上移，占據其位置。文檔的布局發生了變化。
visibility: hidden：隱藏元素,但是并沒有脫離文檔流，渲染的時候為空白，它所在的位置仍然存在，下面的元素不會上移。文檔的布局沒有發生變化。也不會觸發該元素以及綁定的事件。
opacity:0：隱藏元素，和visibility：hidden的作用相似，隱藏元素。元素占據的位置仍然保留但不會改變頁面布局。并且，如果該元素已經綁定一些事件，如click/keypress事件，那么點擊該區域，也能觸發點擊事件的。
5. 如何去除 a 鏈接的默認樣式？直接在 a 鏈接父容器添加顏色，能否繼承到當前 a 鏈接上？
去除a鏈接的默認樣式代碼：
a { text-decoration: none; }
沒加此樣式text-decoration: none;之前：
代碼
加入此樣式之后：
直接在 a 鏈接父容器添加顏色，不能繼承到當前 a 鏈接上。除了顏色不繼承，其他的都可以繼承，比如字體大小。要實現對a鏈接顏色起作用，必須設置a。
如：將父元素的字體設置成20px，顏色為黃色，其代碼和結果分別如下：
由此可以見，父容器的顏色沒有被a鏈接繼承過來。但是字體大小得以繼承。
單獨給a鏈接設置顏色，其代碼和結果如下：
本教程版權歸本人和饑人谷所有，轉載須說明來源
