line-height

2015-09-11 10:49:51   3  举报





AI智能生成

line-height的学习笔记

前端

模版推荐

作者其他创作

大纲/内容

取值

body{line-height:120%;font-size:16px;} h1{font-size:32px;} p{font-size:16px;}

计算后：body：line-height：16px*120%=19.2px 这个计算的值会被层叠下去的元素所继承所以会出现，太紧、太正好、太松

body{line-height:inherit;}

规定应该从父元素继承 line-height 属性的值。

body{line-height:normal}

normal约为1.2 所有继承下来的元素不会忽略本身的font-size，而使用基于font-size算出来的 line-height现在，line-height会随着相关的 font-size做相应的比例缩放

被定义为一个长度值(px,em等) body{line-height:25px;}

后代元素会直接继承所有继承下来的元素会忽略本身的字体大小，而使用相同的line-height

被定义为纯数字， body{line-height:1.2}

同normal,但更灵活，可以自己设置值

建议：使用出数字

（很好的一篇文章）http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

应用

1.设置行高

div文字垂直居中

div居中对齐一直是个难题，水平还好解决些，margin：0 auto; 可以解决现代浏览器，IE下text-align:center。但垂直居中就没那么简单了

解决方案

利用line-block这样做 <div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;"> <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/> This is a test. </span> </div>

单行就比较简单了，把line-height设置为box的大小可以实现单行文字的垂直居中 <div style="line-height:100px;border:dashed 1px #0e0;"> This is a test. </div>