-
高度表現(xiàn)正好 內(nèi)容區(qū)域高度+行間距=行高查看全部
-
高度表現(xiàn)不是行高而是內(nèi)容區(qū)域和行間距查看全部
-
行內(nèi)元素高度由行高決定查看全部
-
光禿禿的文字為是匿名內(nèi)聯(lián)盒子查看全部
-
內(nèi)容區(qū)域content area 是一種圍繞文字看不見(jiàn)的盒子。大小與font-size相關(guān)查看全部
-
line-height:200px 距離基線200px的位置查看全部
-
兩個(gè)基線之間的距離就是行高查看全部
-
包含盒子查看全部
-
行框盒子查看全部
-
內(nèi)聯(lián)盒子查看全部
-
內(nèi)容區(qū)域查看全部
-
1,行高,基線,主要說(shuō)明基線的問(wèn)題是行高的標(biāo)志 2.解釋了行內(nèi)框盒子模型效果, 內(nèi)容區(qū)域,內(nèi)聯(lián)盒子,行內(nèi)盒子,包含盒子。 3,line-height 高度機(jī)理 ,,行高==內(nèi)容區(qū)域+行間距;內(nèi)容區(qū)域=字號(hào)+字體(字體為宋體); 4,line-height的各種屬性,normal,默認(rèn)屬性和瀏覽器和字體有關(guān)系,number,根據(jù)font-size有關(guān)系,length,直接固定具體長(zhǎng)度大?。╬x,pt,em。。。),percent,百分比,inherit繼承關(guān)系(這個(gè)章節(jié)主要說(shuō)明了一下百分比和數(shù)值的關(guān)系,還不是很清楚,需要在看其他資料自己了解); 5,body全局?jǐn)?shù)值行高的經(jīng)驗(yàn),body{font-seiz:14px;line-height:1.4286}是根據(jù)20字號(hào)下的宋體進(jìn)行得出來(lái)的結(jié)論,再次用到了數(shù)值和百分比的關(guān)系。 6,解決圖片下面有空白的bug三種解決方法,圖片塊狀話,圖片底線對(duì)其,行高為零, 7,line-height的實(shí)際應(yīng)用,圖片居中,多行居中,line-height和height的關(guān)系。 少數(shù)字體會(huì)顯示如圖查看全部
-
{height: 36px; line-height: 36px;} ==> {line-height: 36px;}文本垂直居中 多行文本垂直居中 ie8+ .box{line-height: 250px; text-align: center;} .box > .text{display: inline-block; line-height: normal; text-align: left; vertical-align: middle;max-width:100%;}查看全部
-
圖片近似垂直居中,“vertical-align:middle”實(shí)際是基線往上1/2X高度; 適合IE8+。查看全部
-
消除圖片底部間隙 1.圖片塊狀化--無(wú)基線對(duì)齊 img{display:block;} 2.圖片底線對(duì)齊 img{vertical-align:bottom;} 默認(rèn)是vertical-align: baseline 3.行高足夠小--基線位置上移 box{line-height:0;} 特例:小圖片和大文字,基本高度就受行高控制查看全部
舉報(bào)
0/150
提交
取消