【面试每日一题之CSS】2、line-height和heigh区别

前言

随着就业形式的压力，很多人都可能面临着待业，再就业的情况，那么在乾坤未定之际好好的丰实自己的羽翼吧，没有啥比壮大自己重要，所以我整理了一些前端面试宝典给大家，周期性的分享给大家，希望能够得到大家的喜欢。

1、试题分析讲解

字面上的意思其实都知道，表达的东西都是不一样的。

line-height：每一行文字的高，动态，文字换行则整个盒子高度会影响（行高*行数）
height：固化的值，盒子高度

核心回答点：动态与静态的区别

2、代码模块眼见为实

HTML

<div class="he">aaaaaa<br>aaaa<br>aaaaaa<br>aaaa<br>
</div>
<br>
<div class="he1">aaaaaa<br>aaaa<br>aaaaaa<br>aaaa<br>
</div>

CSS

.he{width: 200px;line-height: 50px;border: 5px solid #ccc;
}
.he1{width: 200px;height: 50px;border: 5px solid #ccc;
}

3、效果对比

我们同样设置两个div，一个设置了line-height，一个设置了height，但是从效果看不难发现区别其中的差别。
关键点一定要答到，不能只是浅层的理解。

好了，就写到这里了，希望大家能有一个好的工作机会，2024继续努力，加油，陌生人！！！