CSS深入理解学习笔记之line-height

问题:我怎么才能收到你们公众号平台的推送文章呢?

1、line-height的定义

定义:两行文字基线之间的距离。

注:不同字体之间的基线是不同的。

2、line-height与行内框盒子模型

行内框盒子模型:

①内容区域(content area),是一种围绕文字看不见的盒子,大小与font-size有关;

②内联盒子(inline boxes),不会让内容成块显示,而是排成一行。如果外部含inline水平标签,则属于内联盒子;如果是个光秃秃的文字,则属于”匿名内联盒子“;

③行框盒子(line boxes),每一行就是一个行框盒子,每一个行框盒子又是由一个个内联盒子组成。

④包含盒子(containing box),由一行行行框盒子组成。

3、line-height与内联元素的高度机理

关于内容区域高度:①内容区域高度只与字体以及字号有关,与line-height没有任何关系;②在simsun字体下,内容区域高度等于文字大小值。

行的高度不是由于行高造成的。

因为:①行高由于其继承性,影响无处不在,即使单行文本也不例外;②行高这是幕后黑手,高度表现不是行高,而是内容区域和行间距。

只不过:

行间距 = line-height - font-size

行间距一般是上下均分的。

总结:行高决定内联盒子高度;行间距墙头草,可大可小可负值,保证高度正好等同于行高。

4、line-height各类属性值

line-height:normal///

/inherit;

normal:默认属性值。与浏览器和元素字体相关。因此为了让各个浏览器兼容性一致,要初始化line-height。

:使用数值作为行高值。line-height = number * font-size

:使用具体长度值作为行高值。em/rem/px/pt

:使用百分比作为行高值。line-height = percent * font-size

inherit:行高继承。IE8+

问题:line-height:1.5/150%/1.5em的区别

答:计算无差别。1.5所有可继承元素根据font-size重新计算行高;150%/1.5em当前元素根据font-size计算行高,继承给下面的元素。

body全局数值行高使用经验:

匹配20px使用,为了方便心算:line-height = 20px / 14px = 1.42857

由于chrome是19px,所以body

5、line-height与图片的表现

行高不会影响图片实际占据的高度。

问题:如何消除图片底部间隙?

答:①图片块状化—无基线对齐img;①图片底线对齐img;③行高足够小-基线位置上移.box

6、line-height的实际应用

(1)大小不固定的图片、多行文字的垂直居中

(2)代替height,避免IE6/IE7下的haslayout

在IE6/IE7下,block元素设置height会破坏block规则,而line-height不会。

关注我们

本文来自企鹅号 - web前端开发媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

前言                                   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,...

2397
来自专栏QQ空间开发团队的专栏

手 Q 人脸识别动画实现详解

当存在多个人脸的时候进行主次脸动画的切换,摄像头移动的时候动画的追踪,多个动画的之间的时序控制等问题,总之,UI 展示加上各种业务逻辑使得这个动画变得异常复杂。

2K4
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

1542
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动

元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行。

1074
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

3647
来自专栏菜鸟前端工程师

html+css学习笔记005-font属性0text属性

1423
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 line-height 篇

围绕文字看不见的盒子,其大小跟字体大小有关。范围大概就是选中单行文本后,你选中的区域了。

1782
来自专栏HTML5学堂

一步步实现静态页面布局

本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

73310
来自专栏Android知识点总结

Android原生绘图之炫酷倒计时

4444
来自专栏腾讯NEXT学位

CSS中各种布局的背后(*FC)

3645

扫码关注云+社区

领取腾讯云代金券