HTML常見元素
什么是元素：
元素和標簽通常描述的就是同樣的意思，但嚴格的來講html元素包含了開始和結束標簽。
元素分類：
行內元素（不可以設置寬高、margin左右無效padding設置上下左右都有效）
塊級元素（可以設置寬高、margin與padding都有效、自動換行）
行內塊（可以設置寬高、margin與padding都能夠識別、切不會自動換行）
應用場景：
行內元素如進行內容的顯示內容自適應寬高、也可以多個行內元素同處一行
塊級元素如內容需要設置左右邊距、獨占一行
行內塊：可以滿足既需要行內元素特點也需要塊級元素的部分如讓內容上下左右居中
如何轉換：
display:inline可以轉換為行內元素
display:block;可以轉換為塊級元素
display: inline-block 可以轉換為行內塊;
常見的元素：
常用的行內元素：a、b、em、i、label、span
常用的塊元素：div、p、ol、ul、dl、form、h1~h6、menu、table
常見的行內塊：button、input、textarea、select、img
嵌套關系：
塊級元素可以包含行內元素
塊級元素可以包含塊級元素（例外：p不能包含div）
行內元素一般不能包含塊級元素（例外：a可以包含）（？）
盒模型
什么是盒模型：
盒模型（內容（content）,內邊距（padding）,邊框（border）,外邊距（margin））
這里做個比喻：content:比喻在網上買了幾個雞蛋；
padding：比喻快遞員包裝雞蛋用的防撞紙的距離，把雞蛋牢牢的包裹起來，以免碰撞；
border:外面使用包裝箱的厚度；
margin:一個包裝箱和另一包裝箱的距離；
margin(外邊距)：：比喻成包裝箱和包裝箱的距離
border(邊框)：比喻成包裝箱子
盒模型分類：
標準盒模型：content不包含其他部分
怪異盒模型：content包含了border和padding
區別：
標準：
根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的；即在標準模式下的盒模型，盒子實際內容（content）的width/height=我們設置的width/height;盒子總寬度/高度=width/height+padding+border+margin。
怪異（ie盒模型）：
?在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度+內邊距padding+邊框border寬度=我們設置的width(height也是如此)，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin。
面試問題:
https://www.imooc.com/article/68238
Line-height
什么是line-height：
line-height 屬性設置行間的距離（行高）。
“行高”顧名思意指一行文字的高度。
不允許有負值
可能的值：
Normal 默認。設置合理的行間距. line-height: Normal（font-size * 1.2）
Number 設置數字，此數字會與當前的字體的尺寸 （font-size * Number）相乘來設置行間距
Length 設置固定的行間距。line-height: 20px;
百分比% 基于當前字體尺寸的百分比行間距。（font-size * 100%）
Inherit 規定應該從父元素繼承 line-height 屬性的值。
行高的垂直居中性：
行高還有一個特性，叫做垂直居中性。line-height的最終表現是通過 line boxes實 現的，而無論line boxes所占據的高度是多少（無論比文 字大還是比文字小）， 其占據的空間都是與文字內容公用水平中垂線的。
使用場景：
css中起高度作用的應該就是height以及line-height了吧！如果一個標簽沒有定義 height屬性(包括百分比高度)，那么其最終表現的高度一定是由line-height起作用， 即使是IE6下11像素左右默認高度bug也是如此。
??<!--?html代碼：?-->
????<div?style="font-size:20px;?line-height:0;?border:1px?solid?#cccccc;?background:#eeeeee;"?class="test1">測試</div>
<div?style="font-size:0;?color:?#000;?line-height:90px;?border:1px?solid?#cccccc;?background:#eeeeee;margin-top:?50px;"?class="test2">測試</div>
看test1的結果，此時line-height的高度為0，但是它是以文字的水平中垂線對稱分布的。這一重要的特性可以用來實現文字或圖片的垂直居中對齊。
行高在文章顯示中的應用 一般社交型的網站都會有發博文或寫日志的功能，其中發表后的文章顯示也是有學問的，其中之一就是line-height行高。
首先要知道行高的幾種表示方法：px/em，或normal，或百分值，或數值，或inherit繼承。
在顯示文章的box里，px的表示方法首先是要被淘汰的。因為文章里面的文字是有大有小的，使用px定值，由于繼承性，無法實現根據文字大小自動調整間距，會出現大號文字重疊的現象。normal也是不行的，一般文章顯示最好是650像素的寬度，1.5倍的行距較好。一般瀏覽器的normal值在1~1.2之間，使用normal必然文字間距過小，閱讀吃力。百分值也有繼承性，但是有個很搓的辦法可以實現文字間距自動適應于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不會出現文字重疊的情況了。網易博客就是使用的這個方法，下圖為證： 為什么說這個方法搓呢，使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用數值。150%雖然和1.5在值上是一樣的，但是它們也是有差別的，差別在于繼承性，使用百分比會計算line-height的值，然后以px像素為單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到了該標簽再計算去line-height的像素值。所以同樣的效果只需要.article_box{line-height:1.5;}就可以實現了。
使用行高代替高度避免haslayout 在某些情形下，line-height可以和height互換，因為實現的效果一樣。都能撐開一 個高度，然而這兩個css屬性有一個較隱蔽的差異，就是使用height會使標簽 haslayout，而使用line-height則不會。以前只有IE6的時候曾流行使用height清除 浮動，就 是利用了IE下height使haslayout的屬性。但有時候，haslayout 并不需要，反而要避免。
其原因在于：IE6，IE7下，類似inline-block屬性的元素里如果有block屬性的元素，如果該block haslayout，則該標簽會沖破外部inline-block的顯示而寬度100%顯示，從使按鈕自適應文字大小的效果失效，解決方法就是使用line-height代替height。
上圖中第一個標簽使用height定高，結果寬度直接100%顯示；第二個標簽使用line-height定高，結果很規矩，自適應與內部文字大小。其代碼如下：
css部分：
.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}
html部分：
<span class="out">
<span class="in1">height:20px;</span>
</span>
<span class="out">
<span class="in2">line-height:20px;</span>
</span>
