瀏覽器默認(rèn)行高1.0-1.2之間
line_height.jpg
行高主要有五種設(shè)置方法
1.line-height: normal; //默認(rèn)
2.line-height: inherit; //繼承
3.line-height: 140%; //百分比
4.line-height: 20px/20em //具體值
5.line-height: 1.2 //直接數(shù)值
font中設(shè)置line-height
1.line-height:
p{ font: 100%/normal arial; //字體大小/行高 字體
2.line-height:
p{ font: 100%/120% arial; //字體大小/行高 字體
3.line-height:
p{ font: 100%/20px arial; //字體大小/行高 字體
4.line-height:
p{ font: 100%/1.2 arial; //字體大小/行高 字體
實(shí)例
line-height
html結(jié)構(gòu)
<body>
<h1> Hello World h1</h1>
<p> P Hello World Hello WorldHello WorldHello WorldHello WorldHello W orldHello WorldHello WorldHello WorldHello WorldHello WorldHello World dHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World p</p>
<div id="footer">
footer Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
</div>
</body>
Example1 The percentage value
CSS
body{
font-size: 16px;
line-height: 120%;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最終line-height可在瀏覽器computed中查看
| 元素 | font-size | 最終line-height | 顯示效果 |
|---|---|---|---|
| body | 16px | 16 * 120% = 19.2px | |
| h1 | 32px | inherits = 19.2px | 太擠 |
| p | 16px | inherits = 19.2px | ok |
| #footer | 12px | inherits = 19.2px | 太寬 |
Example2 the length value
CSS
body{
font-size: 16px;
line-height: 20px;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最終line-height可在瀏覽器computed中查看
| 元素 | font-size | 最終line-height | 顯示效果 |
|---|---|---|---|
| body | 16px | 20px | |
| h1 | 32px | inherits = 20px | 太擠 |
| p | 16px | inherits = 20px | ok |
| #footer | 12px | inherits = 20px | 太寬 |
Example 3 the normal value
CSS
body{
font-size: 16px;
line-height: normal;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最終line-height可在瀏覽器computed中查看
| 元素 | font-size | 最終line-height | 顯示效果 |
|---|---|---|---|
| body | 16px | normal * 1.2 => 16 * 1.2 = 19.2px | |
| h1 | 32px | normal * 1.2 => 32 * 1.2 = 38.4px | ok |
| p | 16px | normal * 1.2 => 16 * 1.2 = 19.2px | ok |
| #footer | 12px | normal * 1.2 => 12 * 1.2 = 14.4 | ok |
Example 4 the number value
CSS
body{
font-size: 16px;
line-height: 1.5;
}
h1 { font-size: 32px; }
p { font-size: 16px; }
#footer { font-size: 12px; }
最終line-height可在瀏覽器computed中查看
| 元素 | font-size | 最終line-height | 顯示效果 |
|---|---|---|---|
| body | 16px | 16 * 1.5 = 24px | |
| h1 | 32px | 32px * 1.5 = 48px | 太松 |
| p | 16px | 16px * 1.5 == 24px | ok |
| #footer | 12px | 12px * 1.5 = 18px | ok |
根據(jù)上方例子來看適應(yīng)最好的方式是用下方進(jìn)行line-height自適應(yīng)設(shè)置。
body{
line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 { line-height: 1.2; }
更多前端精彩
前端無縫滾動(dòng)
*前端垂直居中 *
