line-height
2015-09-11 10:49:51 3 举报
AI智能生成
登录查看完整内容
line-height的学习笔记
作者其他创作
大纲/内容
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 \u00A0所有继承下来的元素不会忽略本身的font-size,而使用基于font-size算出来的line-height现在,line-height会随着相关的font-size做相应的比例缩放
后代元素会直接继承所有继承下来的元素会忽略本身的字体大小,而使用相同的line-height
被定义为纯数字, body{line-height:1.2}
建议:使用出数字
(很好的一篇文章)http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
应用
1.设置行高
div文字垂直居中
div居中对齐一直是个难题,水平还好解决些,margin:0 auto;\u00A0可以解决现代浏览器,IE下text-align:center。但垂直居中就没那么简单了
解决方案
利用line-block这样做\u00A0 \u00A0 \u00A0This is a test.\u00A0 \u00A0 \u00A0This is a test.\u00A0 \u00A0
单行就比较简单了,把line-height设置为box的大小可以实现单行文字的垂直居中\u00A0 \u00A0 \u00A0This is a test.\u00A0
![图片优化](https://www.processon.com/chart_image/template/thumb/58057981e4b04fde6c478f1a.png?tid=58035a2ae4b0cff94fa89068)
收藏
![line-height](https://www.processon.com/chart_image/template/thumb/5773a6d4e4b060ef10edc5e1.png?tid=55f23636e4b0a0e73e5b0d3a)
收藏
0 条评论
回复 删除
下一页