[上海|结业弟子]JS-温奇|2019年10月09日的日报-技能树.IT修真院

发表于： 2019-10-09 23:13:22

1 1363

今天完成的事：

进行任务6-10

明天计划的事：

继续任务6-10

遇到的问题：

图片显示出现多余的空白

收获：

听师兄的解释去查找了vertical-align和line-height的关系

vertical-align属性

/* 关键字值 */

vertical-align: baseline;

vertical-align: sub;

vertical-align: super;

vertical-align: text-top;

vertical-align: text-bottom;

vertical-align: middle;

vertical-align: top;

vertical-align: bottom;

/* <长度> 值 */

vertical-align: 10em;

vertical-align: 4px;

/* <百分比> 值 */

vertical-align: 10%;

/* 全局值 */vertical-align: inherit;

vertical-align: initial;

vertical-align: unset;

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。例子：

{
  line-height: 30px;
  vertical-align: -10%;
}

等同于：

{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}

关于两个元素关系产生的基本现象

例子：

<div><img src="mm1.jpg"></div>

表现：

看上去很正常，如果给<div>加上背景颜色

<div style="background-color:#e5edff;"><img src="mm1.jpg"></div>

会发现图片下面有一段空白：

会出现空白间隙就是 vertical-align和line-height携手搞的鬼！

对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

张鑫硕对这种现象命名为幽灵空白节点

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，被称之为“幽灵空白节点”。

这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。但是，空格是透明的，

为了便于理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，图片下面的间隙，依旧是那个间隙。

让新增的文本inline-block化，然后弄个白色背景，显示其占据的高度。

通过这几个例子会产生几个问题

1.vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘。所以，图片的下边缘就和后面zxx中的字母x下边缘对齐（见下图）。而字符zxx本身是有高度的，对吧，于是，图片下面就留空了。

2.而zxx文字的高度是由行高决定的。

解决办法 vertical-align和line-height我们随便搞定一个就可以了。

比方说vertical-align.

1. 让vertical-align失效

图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）。例如：

img { display: block; }

2. 使用其他vertical-align值

告别baseline, 取用其他属性值，比方说bottom/middle/top都是可以的。

vertical-align:bottom vertical-align:middle vertical-align:top

3. 直接修改line-height值

下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。比方说，我们设置行高5像素：

div { line-height: 5px; }

4. line-height为相对单位，font-size间接控制

如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说来个狠的，font-size设为大鸡蛋0, 本质上还是改变line-height值.

div { font-size: 0; }

返回列表