-
line-height的實際應用：
1、大小不固定的圖片、多行文字垂直居中
1）圖片水平垂直居中
2）多行文本水平垂直居中
2、代替height，避免IE6\7下的haslayout
查看全部 -
line-height與圖片的表現：
1、行高會不會影響圖片實際占據的高度：不會
行高引起容器高度的改變，實際上是與文字行高變化共同改變的
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>：根據當前元素的字體大小計算
如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：所有可繼承元素根據font-size重計算行高
2）150%/1.5em：當前元素根據font-size計算行高，繼承給下面的元素
3、body全局數值行高使用，匹配20像素
body{
? ?font-size:14px;
? ?line-height:20px / 1.4286;
}
查看全部 -
1、line-height的定義：兩行文字基線之間的距離
2、內聯元素的高度其實是由行高決定的
3、行高是兩基線距離，單行文字為何有行高
行高有基繼承性
高度的表現不是行高，而是內容區域和行間距
內容區域高度+行間距=行高
4、內容區域高度只與字號及字體有關，與line-height無關
若字體為宋體，內容區域高度等于文字大小值，font-size+行間距=line-height
查看全部 -
行高不會影響圖片實際占據的高度；
消除圖片底部間隙的方法：
圖片塊狀化-無基線對齊? img{display:block;}
圖片底線對齊 img{vertical-align:bottom;}
行高足夠小-基線位置上移
查看全部 -
內聯元素的高度由行高決定，高度的表現不是行高，而是內容區域和行間距；（行高=內容區域+行間距）
內容區域高度只與字號以及字體有關，與line-height沒有關系（宋體下內容區域等于字體大?。?/p>
查看全部 -
記住Chrome瀏覽器數值行高為1.4286才為20px查看全部
-
line-height：的值為數字、百分比和長度時的區別查看全部
-
數值 百分比 和長度作為值的區別查看全部
-
此例子僅通過數值大小來證明normal值與字體大小有關，且不同瀏覽器默認值不同查看全部
-
基線是定義字線的根本
查看全部 -
實現多行垂直居中可以將多行文本使用一個元素包裹，設置為display:inline-block轉換成圖片一樣的display屬性，然后使用vertical-align:middle。
查看全部 -
給圖片設置? ?vertical-align:?middle不兼容IE8以下的瀏覽器。
實現多行垂直居中可以將多行文本使用一個元素包裹，設置為display:inline-block模擬成圖片，然后使用vertical-align:middle。
IE6里如果給元素設置height后，會導致元素的行內元素或行內塊狀元素塊狀化，導致流體布局或者自適應布局錯亂，需要注意，可以使用line-height代替
查看全部 -
行內元素都會基于基線對齊，
<p><img src='xxx.png'></p>
如上p里沒有文字，但是存在隱匿文本節點內容，所以圖片距離p底部有一點的距離，這個距離相當于文字基線距離底部距離（半個行間距，行高=內容高度+行間距）。
解決方法：
圖片塊狀化：圖片塊狀化可以讓其不按照基線對齊顯示。
vertical-align:?bottom；讓圖片按底部對齊。
line-height:0：行高足夠小，基線位置上移。
查看全部 -
因為不同瀏覽器和不同字體的行高不同，所以重置line-height。
line-height:1.42857在火狐和opera瀏覽器可以表現為20px，但是谷歌卻是19px，所以向上取值line-height:1.4286，表現都為20px。
查看全部
舉報