最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

line-height的實(shí)際應(yīng)用：

1、大小不固定的圖片、多行文字垂直居中

1）圖片水平垂直居中

2）多行文本水平垂直居中

2、代替height，避免IE6\7下的haslayout

line-height與圖片的表現(xiàn)：

1、行高會不會影響圖片實(shí)際占據(jù)的高度：不會

行高引起容器高度的改變，實(shí)際上是與文字行高變化共同改變的

2、消除圖片底部間隙的方法:

1）圖片塊狀化-無基線對齊

img{ display：block；}

2）圖片底線對齊

img{ vertical-align:? bottom；}

3）行高足夠小-基線位置上移

img{ line-height：0；}

行高的各類屬性值：

1、行高支持的屬性值：

normal/<number>/<length>/<percent>/inherit

1）normal：由瀏覽器，以及元素字體決定

2）<number>：根據(jù)當(dāng)前元素的字體大小計(jì)算

如line-height:1.5;

? ? font-size：20px；

那么line-height=1.5*20=30px；

3）<length>：使用的具體的長度值作為行高值，line-height：1.5em，1.5rem，20px，20pt；

4）<percent>：使用百分比值作為行高值

如line-height：150%；

? ? font-size：20px；

那么line-height=150%*20=30px

5）inherit：繼承

2、line-height：1.5? / 1.5em /150%;? ?的差別：

1）1.5：所有可繼承元素根據(jù)font-size重計(jì)算行高

2）150%/1.5em：當(dāng)前元素根據(jù)font-size計(jì)算行高，繼承給下面的元素

3、body全局?jǐn)?shù)值行高使用，匹配20像素

body{

? ?font-size:14px;

? ?line-height:20px / 1.4286;

}

1、line-height的定義：兩行文字基線之間的距離

2、內(nèi)聯(lián)元素的高度其實(shí)是由行高決定的

3、行高是兩基線距離，單行文字為何有行高

行高有基繼承性

高度的表現(xiàn)不是行高，而是內(nèi)容區(qū)域和行間距

內(nèi)容區(qū)域高度+行間距=行高

4、內(nèi)容區(qū)域高度只與字號及字體有關(guān)，與line-height無關(guān)

若字體為宋體，內(nèi)容區(qū)域高度等于文字大小值，font-size+行間距=line-height

行高不會影響圖片實(shí)際占據(jù)的高度；

消除圖片底部間隙的方法：

1. 圖片塊狀化-無基線對齊? img{display:block;}

2. 圖片底線對齊 img{vertical-align:bottom;}

3. 行高足夠小-基線位置上移
   

內(nèi)聯(lián)元素的高度由行高決定，高度的表現(xiàn)不是行高，而是內(nèi)容區(qū)域和行間距；（行高=內(nèi)容區(qū)域+行間距）

內(nèi)容區(qū)域高度只與字號以及字體有關(guān)，與line-height沒有關(guān)系（宋體下內(nèi)容區(qū)域等于字體大?。?/p>

基線是定義字線的根本

實(shí)現(xiàn)多行垂直居中可以將多行文本使用一個(gè)元素包裹，設(shè)置為display:inline-block轉(zhuǎn)換成圖片一樣的display屬性，然后使用vertical-align:middle。

給圖片設(shè)置? ?vertical-align:?middle不兼容IE8以下的瀏覽器。

實(shí)現(xiàn)多行垂直居中可以將多行文本使用一個(gè)元素包裹，設(shè)置為display:inline-block模擬成圖片，然后使用vertical-align:middle。

IE6里如果給元素設(shè)置height后，會導(dǎo)致元素的行內(nèi)元素或行內(nèi)塊狀元素塊狀化，導(dǎo)致流體布局或者自適應(yīng)布局錯(cuò)亂，需要注意，可以使用line-height代替

行內(nèi)元素都會基于基線對齊，

<p><img src='xxx.png'></p>

如上p里沒有文字，但是存在隱匿文本節(jié)點(diǎn)內(nèi)容，所以圖片距離p底部有一點(diǎn)的距離，這個(gè)距離相當(dāng)于文字基線距離底部距離（半個(gè)行間距，行高=內(nèi)容高度+行間距）。

解決方法：

1. 圖片塊狀化：圖片塊狀化可以讓其不按照基線對齊顯示。

2. vertical-align:?bottom；讓圖片按底部對齊。

3. line-height:0：行高足夠小，基線位置上移。

因?yàn)椴煌瑸g覽器和不同字體的行高不同，所以重置line-height。

line-height:1.42857在火狐和opera瀏覽器可以表現(xiàn)為20px，但是谷歌卻是19px，所以向上取值line-height:1.4286，表現(xiàn)都為20px。