line-height学习与总结

一．CSS中，line-height被用来控制行与行之间垂直距离，指两行文字基线之间的距离（baseline）,借用一张图来说明什么是基线，以及行高的定义：下图两条红线的距离，如下图：

而对于单行文本的行高：慕课网上张鑫旭老师是这样解释的：

（1）行高由于继承性，影响无处不在，即使是单行文本也不例外；

（2）行高是真正的幕后黑手，高度表现不是行高，而是由内容区域与行间距决定，而正好，内容区域+行间距=行高。因此，单行文本行高就是这样定义的。

二，行高的作用

行高决定内联盒子的高度。

（1）内容区域+行间距=行高，内容区域高度（如蓝色区域的高度），由字体及字号决定，与行高无关，行间距（蓝色区域与黑色边框的距离）=（行高-内容区域高度）/2就是上下行间距，如图9：

（2）line-height与行内框盒子模型有关

“内容区域”（content area），是一种围绕文字看不见的盒子，大小与字体大小有关；

“内联盒子”（inline boxes），让内容排成一行的作用，如果有外部含inline水平的标签（span,a,em,strong等），则属于“内联盒子”，如果只是光秃秃的文字，则属于“匿名内联盒子”；

“行框盒子”（lines boxes），每一行就是一个“行框盒子”，它其实就是包裹每行文字。一行文字一个line boxes。

所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

行内框盒子对理解line-height有什么帮助呢？

在行内框盒子（inline box）模型中，这个（行框盒子）line boxes，line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。Line boxes其实是由它里面的内联盒子里的文字啊，图片等等，谁最高就决定，高度值就是谁。

三．line-height的属性值：

1.body{line-height:normal;}

2.body{line-height:inherit;}

3.body{line-height:120%;}

4. body{line-height:25px;}

5.body{line-height:1.2}

四．Line-height的应用：

（1）单行文本垂直居中，不用设置高度，而只需设置line-height 的值。若是有固定高度，则让行高等于高度值，就可以实现单行文本垂直居中。

（2）对于多行文本，没必要使用line-height，使用padding来更方便，让其父容器不固定高度。设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。若高度固定，用一个span标签将所有的文字封装起来，设置文字display属性（inline-block属性）,并把line-height的高度与height的高度设置一样，就可以完成垂直居中。实现代码：

这是自己学习line-height的总结，以及自己在实际中长用到line-height的地方。对与这个还会继续再学习，会继续补充或者修改些许内容。

转载于:https://blog.51cto.com/xiyin001/1745714

line-height学习与总结相关推荐

html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
【The Linux Command Line】学习笔记
以下内容参考于书籍<The Linux Command Line>,中文版本翻译项目:快乐的 Linux 命令行终端提示符:$ 表示普通用户,# 表示超级用户鼠标与光标:使用光标选择 ...
Windows Phone 7 不温不火学习之《画图》
在Android 我们需要在屏幕画图,或扩展SurfaceView 或扩展父类View 在OnDraw()里面使用画板和调色笔画画.而在微软的强大封装下,这种画图的试成为了控件的可能,微软将众多日常必 ...
书籍排版学习心得_为什么排版是您可以学习的最佳技能
书籍排版学习心得重点 (Top highlight) I was introduced to design in a serpentine fashion. I don't have any for ...
html字体代码_第50天 HTML和css的学习
第65次(html和css) 第65次(html和css) 学习主题:html和css 学习目标: 1 掌握html5新增标签的使用 2 掌握css入门对应视频: http://www.itbaiz ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
【Docker学习笔记三】Docker常用容器安装及图形化管理工具
上一篇Blog详细介绍了如何在CentOS上进行Docker的安装.卸载以及如何进行镜像加速,了解了Docker大致的运行流程以及常用的命令.时隔半个月之后,度过了过节失落期后再次拾起来自己的年度计划 ...
真正的能理解CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
HTML与CSS学习总结
HTML与CSS学习总结一.HTML总结 1 概念 HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言. 标记语言是由 ...

line-height学习与总结

line-height学习与总结相关推荐

最新文章

热门文章