【面试每日一题之CSS】2、line-height和heigh区别
line-height和heigh区别
- 前言
- 1、试题分析讲解
- 2、代码模块眼见为实
- 3、效果对比
前言
随着就业形式的压力，很多人都可能面临着待业，再就业的情况，那么在乾坤未定之际好好的丰实自己的羽翼吧，没有啥比壮大自己重要，所以我整理了一些前端面试宝典给大家，周期性的分享给大家，希望能够得到大家的喜欢。
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继续努力，加油，陌生人！！！