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/<number>/<lenght>/<percent>/inherit;

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

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

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

  <percent>:使用百分比作为行高值。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{font-size:14px;line-height:1.4286;}

5、line-height与图片的表现

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

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

  答:①图片块状化—无基线对齐img{display:block;};①图片底线对齐img{vertical-align:bottom;};③行高足够小-基线位置上移.box{line-height:0;}

6、line-height的实际应用

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

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

CSS相关知识点

4、如果给了定位,但是没有给left,top等值,默认会腾出行内元素、padding的位置,有的时候我们可以使用这些特性,有的时候我们不熟悉的话可能产生bug。

604
来自专栏代码世界

前端之CSS内容

一、CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档...

29110
来自专栏小白客

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3126
来自专栏欧阳大哥的轮子

iOS的MyLayout布局体系--浮动布局MyFloatLayout

    在MyLayout的6大布局中,每种布局都有不同的应用场景。且每种布局的子视图的约束机制不一样:线性布局MyLinearLayout、表格布局MyTab...

653
来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

884
来自专栏菜鸟计划

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

4587
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

101
来自专栏程序员互动联盟

【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

34710
来自专栏前端知识分享

第20天:京东nav、footer部分制作

cursor:pointer; 鼠标变成小手 cursor:default;小白 cursor:move;移动 cursor:text;文本输入

571
来自专栏前端杂货铺

清除浮动的原理剖析

常用的清除浮动的几种方法总结下:   1,手动设置一个标签(在浮动元素下方),然后对其设置clear属性     2,给浮动元素设置 :after伪类,创建块元...

3369

扫描关注云+社区