前端一HTML:二十三行高的介绍,行高的单位
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:二十三行高的介绍,行高的单位
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
行高的介紹
line-height
? ? 作用:設置文本的行高
? ? 應用:將文本的行高設置為容器的高度,這樣可以將文本在容器中垂直居中。
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 100px;background-color: red;text-align: center;font-size: 30px;line-height: 100px;}</style> </head> <body><div>四大名著</div> </body> </html>行高的單位
? 1.px像素
? 2. %(百分比), %之前的數據一定是整數。
? ?如果 line-height單位設置為%,那么將來在計算的時候,基數是當前標簽中文本的字體(font-size)的大小。如下: 字體大小就位
? 20px * 150% = 30px
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style >div{font-size: 20px;line-height: 150%;}</style> </head> <body><div>名</div> </body> </html>?? 3. em， em之前的數據一定是小數。
? ? ? 效果跟百分比是一樣的。 ?一行em大小相當于是當前標簽中的font-size的大小。
? ? ?如下: ?20px * 1.5 = 30px
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style >div{font-size: 20px;line-height: 1.5em;}</style> </head> <body><div>名</div> </body> </html>? ? ? 4沒有單位
? ? 如果不涉及到繼承,那么帶不帶單位(em)都是一樣的效果。
? ? 如果涉及到繼承,那么就有比較大的區別:
? ?①如果單位是em,那么將來在繼承的時候,我們的瀏覽器會將行高對應的具體的數值計算出來后再繼承。
? ?②如果沒有單位，那么將來在繼承的時候，我們的瀏覽器會先將line-height這個屬性繼承給子元素，再在子元素中計算。
? ?
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.father{width:300px;height: 200px;background-color: red;font-size: 20px;/*如果單位是em,那么將來在繼承的時候,我們的瀏覽器會將行高對應的具體的數值計算出來后再繼承。20px * 1.5 = 30pxline-height: 30px; 然后繼承給子元素*/ /*line-height: 1.5em;*//*如果沒有單位，那么將來在繼承的時候，我們的瀏覽器會先將line-height這個屬性繼承給子元素，再在子元素中計算。子元素的font-size:24px所以 line-height: 24px*1.5 = 36px;*/line-height: 1.5;}.son{background-color: blue;font-size: 24px;}</style> </head> <body><div class="father"><div class="son">四大名著</div></div> </body> </html>?
總結
以上是生活随笔為你收集整理的前端一HTML:二十三行高的介绍,行高的单位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python六十三: __call__
- 下一篇： spring27: bean装配-基于x