css、line-height初探

2016-12-27 本文已影响69人 zoomsk

浏览器默认行高1.0-1.2之间

line_height.jpg

行高主要有五种设置方法

1.line-height: normal; //默认

2.line-height: inherit; //继承

3.line-height: 140%; //百分比

4.line-height: 20px/20em //具体值

5.line-height: 1.2 //直接数值

font中设置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; //字体大小/行高 字体

实例

line-height

html结构

 <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

根据上方例子来看适应最好的方式是用下方进行line-height自适应设置。

body{
line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 { line-height: 1.2;  }

更多前端精彩
前端无缝滚动
*前端垂直居中 *

css、line-height初探

font中设置line-height

1.line-height:

2.line-height:

3.line-height:

4.line-height:

实例

Example1 The percentage value

Example2 the length value

Example 3 the normal value

Example 4 the number value

猜你喜欢

热点阅读