饑人谷_李棟
1.基線
2.行內框盒子模型
3.行內框盒子模型的應用
4.line-height屬性
5.行高的應用
line-height
兩行文字基線之間的距離
一、基線
英語本第三條紅線，或字母x的下邊緣
使用不同字體，基線位置不同
//微軟雅黑就正好
//arial、宋體 (simsun)偏上
行高可以使單行文本垂直居中
//看上去居中了
//只有字體大小為0的時候才絕對垂直居中 ，字體越大，文字越偏下
二、行內框盒子模型
<p>這是一行文字<em>你好<em>再見</p>
1. 內容區域 content area
//圍繞文字 與字號、字體相關
//可以理解為選中文字后的藍色背景
//宋體下 內容區域=fontsize
2. 內聯盒子 inline boxes
//從名字就可以看出什么意思
//內聯盒子：被inline標簽包裹；匿名內聯盒子：只有文字
3. 行框盒子line boxes
//每一行
//包含內聯盒子
4. 包含盒子containing box
//由行框盒子組成
三、行內框盒子模型的應用
內聯元素的高度是由line-height決定的
//line-height= 內容區域+行間距內聯元素內包含多個不同行高的元素
高度不等于最大的行高行半間距
//行間距/2
//可負值---文字重疊的時候
四、 line-height屬性
- normal
- 數字 //數字*fontsize
- 長度值//em px
- 百分比//百分比*fontsize
- 繼承
//input的行高默認是normal設置成inherit可控性更好
//數字的話 所有元素都會重新計算行高
//百分比和em 父容器重新計算 其結果所有元素共用
五、行高的應用
body里面的行高設置
blog類重閱讀的至少1.5、1.6
正常網頁匹配20px line-height=20/14=1.42857 無限接近20
但是， chrome向下取值=19px 所以我們要取1.4286行高與圖片
<p><img src=...></p>
我們會發現 圖片與p底部有一段間隙
//行高不會影響圖片實際占據的高度
這是因為inline元素默認是基線對齊的 vertical-align=baseline
改變行高之后圖片的位置也變了
是vertical-align和行高共同影響的結果
那為什么沒文字也有空隙類
隱匿文本節點
//故名思意怎么消除間隙
塊狀化 display：block
底線對齊 vertical：bottom
行高夠小 line-height：0；
- 圖片水平垂直居中
外層容器設置行高text-align：center 圖片vertical-align：middle//近似做到垂直居中//ie8以下不兼容
- 如果圖片小文字大的話
可以調 行高進行設置//非ie6 圖片由vertical-align設置
- 多行文字水平居中
除了上面的設置外 需要改變他的基線對齊方式（垂直）+行高繼承+文本對齊（水平）//兼容問題
- 避免 ie6、ie7下height的haslayout
//沖破父容器的自適應束縛（inline-block、float） 把父容器撐滿
可以用行高代替height
-
ps:不要再css里面設置{height：20px;line-height:20px;}
//因為你不設height也可以達到同樣效果
因為課上看到相關問題，所以寫了來自張鑫旭的視頻筆記，供以后參考
