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