line-height的定義#
基線之間的距離
不同字體，基線位置不同
所有內聯元素的樣式表現都與行內框盒子模型有關，例如浮動的圖文環繞效果
4種行內框盒子模型#
<p>hello world<em>this is em</em></p>
上面一行普通的文字，包含了4種盒子。
四種盒子模型：
1.“內容區域”（content area）
圍繞文字看不見的盒子，內容區域的高度大小只與font-size的大小和font-family有關，在simsun宋體字體下，內容區域高度等於文字大小。
2.“內聯盒子”（inline boxes）
3.“行框盒子”（line boxes）
每一行就是一個“行框盒子”，由一個個內聯盒子組成
4.“包含盒子”（containing box）
由一行一行的“行框盒子”組成
line-height的高度機制與原理#
內聯元素的高度是由行高決定的即line-height
單行文字也有行高
問：line-height明明是兩基線距離，單行文字哪來行高，還控制了高度？
答：1.行高由於其繼承性，影響無處不在，即使單行文本也不例外；
2.行高只是幕后黑手，高度的表現不是行高，而是內容區域和行間距。
內容區域的高度+行間距=行距
在simsun宋體下：
font-size=240px=內容區域的高度
字號font-size+行間距=line-height行高
半行間距
多個行框盒子的包含容器
多行文本的高度就是單行文本高度累加
line-height的不同屬性值#
line-height支持的屬性值
① normal 默認值，與瀏覽器相關，
在同一瀏覽器中也和元素字體相關（font-family），所以考慮到兼容性，實際開發時，會對行高reset，保證各瀏覽器兼容性一致
②
line-height：1.5;
實際行高=1.5*font-size（假設是200px）=30px
③
④
⑤ inherit--行高繼承（input默認的行高是normal）
1.5/1.5em(150%)的區別：
--1.5是根據自己的font-size計算line-height
--1.5em是根據父級元素font-size計算，相當於繼承了父元素的line-height
經驗：
--閱讀 1.5
--網頁開發 匹配20像素（20/font-size）計算結果取大不取小
line-height與圖片的表現#
inline水平元素vertical-align默認基線對齊（基線：即字母x的下邊緣）
如何消除圖片底部間距？###
1.圖片塊狀化-無基線對齊
vertical-align屬性只對內聯，內聯塊狀元素有效
2.圖像底線對齊
img{vertical-align：bottom；}
- 行高足夠小-基線位置上移
.box{line-height:0;}
line-height的實際應用#
- 圖片水平垂直居中 （ie8+）
.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle}
- 多行文本水平垂直居中(ie8+)
.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block; line-height: nomal; text-align:left;vertical-align:middle;}
- 用line-height代替height，避免ie6/ie7的haslayout
標題樣式：
{height:36px;line-height:36px;}
其實可以直接簡寫成：
{line-height:36px;}
還有很多沒有理解的地方。。。不開心。。。