css中height和line-height區(qū)別
發(fā)布時(shí)間：2014-08-02 23:47:11 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css中height和line-height區(qū)別,需要的朋友可以參考下
line-height：行高 設(shè)置文字間上下距離
height：高度 就是定義一個(gè)層 或某樣?xùn)|西的高度啦
也就是說(shuō)line-height是特指單行高度，height可以為所有元素的高度
文字放大后邊緣會(huì)重疊？
line-height直白理解就是文字高度加上文字上下的空白區(qū)域，line-height最好不要設(shè)置單位，如果固定單位后，行高就是確定值。
當(dāng)字體放大且沒(méi)有設(shè)置元素的line-height（繼承自父元素且父元素為固定值）或者其值為固定值就會(huì)出現(xiàn)文字超出行高范圍出現(xiàn)重疊。
line-height有繼承屬性，所以正文部分內(nèi)容line-height最好設(shè)置為為數(shù)字1.5，也就是字體高度*1.5的高度，
這樣行高會(huì)隨著字體縮放跟著縮放。
如何設(shè)置文字圖片行內(nèi)居中？
line-height默認(rèn)是baseline對(duì)其的，可以使用vertical-align:middle使其文字圖片居中對(duì)齊。
如何更加易讀？
行內(nèi)文字背景顏色#fff，文字顏色#333；文字周圍有空白line-height行高1.25-1.5，減少壓迫感，正文大小為14px，其它可以為12px。
input button 各個(gè)瀏覽器表現(xiàn)一致。
firefox默認(rèn)的linde-height值默認(rèn)為normal，需要明確指定。
button, input[type="button"], input[type="submit"] {
line-height:normal !important;
}
input.button, a.button, button {
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px 8px;
overflow:visible;
}
height：高度 就是定義一個(gè)層 或某樣?xùn)|西的高度啦
也就是說(shuō)line-height是特指單行高度，height可以為所有元素的高度
文字放大后邊緣會(huì)重疊？
line-height直白理解就是文字高度加上文字上下的空白區(qū)域，line-height最好不要設(shè)置單位，如果固定單位后，行高就是確定值。
當(dāng)字體放大且沒(méi)有設(shè)置元素的line-height（繼承自父元素且父元素為固定值）或者其值為固定值就會(huì)出現(xiàn)文字超出行高范圍出現(xiàn)重疊。
line-height有繼承屬性，所以正文部分內(nèi)容line-height最好設(shè)置為為數(shù)字1.5，也就是字體高度*1.5的高度，
這樣行高會(huì)隨著字體縮放跟著縮放。
如何設(shè)置文字圖片行內(nèi)居中？
line-height默認(rèn)是baseline對(duì)其的，可以使用vertical-align:middle使其文字圖片居中對(duì)齊。
如何更加易讀？
行內(nèi)文字背景顏色#fff，文字顏色#333；文字周圍有空白line-height行高1.25-1.5，減少壓迫感，正文大小為14px，其它可以為12px。
input button 各個(gè)瀏覽器表現(xiàn)一致。
firefox默認(rèn)的linde-height值默認(rèn)為normal，需要明確指定。
復(fù)制代碼
代碼如下:button, input[type="button"], input[type="submit"] {
line-height:normal !important;
}
input.button, a.button, button {
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px 8px;
overflow:visible;
}
相關(guān)文章
- 我們?cè)赾ss編寫中需要對(duì)大篇幅的內(nèi)容顯示的更好看，有些間隔，不要在擠在一起難看，就可以使用Line-Height屬性進(jìn)行控制2013-07-20
- “行高“顧名思義指一行文子的高度，大家對(duì)CSS行高line-height都有自己的理解，下面為大家介紹下本人自己的理解2014-01-08
- 本文介紹下css中的line-height屬性的用法，通過(guò)實(shí)例學(xué)習(xí)css line-height屬性的具體用法，感興趣的朋友參考下2014-08-02
- 本文介紹下，css中的line-height屬性的用法，通過(guò)實(shí)例學(xué)習(xí)css line-height屬性的具體用法，感興趣的朋友參考下2014-08-02
- 本文從line-height的定義、line-height的理解、line-height的應(yīng)用3個(gè)方面詳細(xì)為大家介紹了line-height，非常的詳細(xì)，有需要的朋友可以參考下2014-10-22