css中line-height的具体用法是什么?
发布网友
发布时间：2022-04-28 13:42
共3个回答
懂视网
时间：2022-04-28 18:04
<style>
.test {
border: 1px solid #ccc;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="test"></div>
</body>但是根据熟知，当我们不为元素设置height，而元素中有内容时，该元素依然获取到了高度：
<style>
.test {
border: 1px solid #ccc;
width: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>
为什么div获取到了高度，并不是由于文字撑起了高度，而是line-height撑起了div，比较一下两端代码
.test {
border: 1px solid #ccc;
width: 100px;
line-height: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>效果如下：
.test {
border: 1px solid #ccc;
width: 100px;
line-height: 0;
}
</style>
<body>
<div class="test">1</div>
</body>显而易见的结果就是因为有了height所以有高度，没有height则因为有了line-height而有了高度 更多详细的细节其实是因为 每一行文字 都有一个line boxes， 这些一个个盒子自然撑起了父元素的高度。
同时，观察上面的例子就能发现文字的中线和line-height的中线是在相同位置的，所以才有了常用的那套居中办法：
<style>
.test {
line-height: 100px;
height: 100px;
}
</style>设置line-height和height相同数值则可以使得其中文字垂直居中
从结果来看确实如此，但是这句话不对，这句话多余了几个字，完全不需要设置height，只需要line-height就可以做到文字垂直居中了。
热心网友
时间：2022-04-28 15:12
line-height就用来给一行内容的高度设定范围的。
1、比如说，有一个这样的DIV：
<div style="line-height:36px;"></div>
它的意思就是说，这个DIV里面的每一行文字，占36个像素。
2、它经常应用在让一些文字居中到一个位置。比如像下面这个：
<div style="width:50px;height:36px;color:red;background:black;"></div>
3、如果你在这个DIV里面写一行文字的话，它默认是在这个DIV的左上角的。如果你想让它在垂直方向上居中的话，那你就可以再加一个样式，就是line-height:36px；意思是让这里面的文字每一行占36个像素，那么，这行文字的高度正好和那个DIV的高度相同，那文字就会表现出垂直居中的效果了。
CSS - 层叠样式表
英文全称：Cascading Style Sheets。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
热心网友
时间：2022-04-28 16:30
比如说，有一个这样的DIV：
<div style="line-height:36px;"></div>
它的意思就是说，这个DIV里面的每一行文字，占36个像素。
它经常应用在让一些文字居中到一个位置。比如像下面这个：
<div style="width:50px;height:36px;color:red;background:black;"></div>
如果你在这个DIV里面写一行文字的话，它默认是在这个DIV的左上角的。如果你想让它在垂直方向上居中的话，那你就可以再加一个样式，就是line-height:36px；意思是让这里面的文字每一行占36个像素，那么，这行文字的高度正好和那个DIV的高度相同，那文字就会表现出垂直居中的效果了。
不知道说明白没有。
