css⾏⾼的⽤法总结
css没有提供⼀个直接设置⾏间距的⽅式，所以只能通过设置⾏⾼来间接的设置⾏间距，⾏⾼越⼤⾏间距就越⼤，⽤ line-height 来设置⾏⾼。
.p1 {
/* 设置⾏⾼ */
line-height: 40px;
}
⾏⾼类似于上学时使⽤的单线本，单线本是⼀⾏⼀⾏的线，线与线之间的距离就是⾏⾼，⽹页中的⽂字实际上是写在⼀个看不见的线中的，⽽⽂字会默认在⾏⾼中垂直居中显⽰。
⾏间距 = ⾏⾼ - 字体⼤⼩
line-height 可以设置的值的类型：
1. 直接接收⼀个⼤⼩，如：line-height: 20px;
2. 可以指定⼀个百分数，如：line-height: 100%;
3. 可以直接指定⼀个数字，不带单位，如：line-height: 1.5;
/* ⾏间距 = 40px(⾏⾼) - 20px(字体⼤⼩) 为 20px */
.p1 {
/* 字体⼤⼩ */
font-size: 20px;
/* ⾏⾼为 40px */
line-height: 40px;
}
/* ⾏间距 = (200% * 20px(字体⼤⼩))(⾏⾼) - 20px(字体⼤⼩) 为 20px */
.p1 {
/
* 字体⼤⼩ */
font-size: 20px;
/* ⾏⾼ = 200% * 20px(字体⼤⼩) 为 40px */
line-height: 200%;
}
/* ⾏间距 = (2 * 20px(字体⼤⼩))(⾏⾼) - 20px(字体⼤⼩) 为 20px */
.p1 {
/* 字体⼤⼩ */
font-size: 20px;
/* ⾏⾼ = 2 * 20px(字体⼤⼩) 为 40px */
line-height: 2;
}
css设置文字垂直居中对于单⾏⽂本，可以将⾏⾼设置为和⽗元素的⾼度⼀致，这样可以将单⾏⽂本在⽗元素中垂直居中，注意，⼀定是单⾏⽂本
.box1 {
width: 200px;
height: 200px;
background-color: aquamarine;
/* line-height 等于 height，单⾏⽂本就会在⽗元素内垂直居中 */
line-height: 200px;
}
<div class="box1">
<a href="#">蜀道之难，难于上青天！</a>
</div>
在 font 属性中也可以指定⾏⾼，在字体⼤⼩的后⾯添加 "/⾏⾼"，该值是可选的，如果不指定则会使⽤默认值。
/* 格式 */
.p1 {
/* 在字体后⾯加 “/50px”，表⽰⾏⾼ */
font: bold italic normal 30px/50px 微软雅⿊, 宋体, Serif;
}
/* 错误的写法 */
.p1 {
/* 在此设置⾏⾼，不会起作⽤，相反font的"/50px"会起作⽤ */
line-height: 100px;
/* 在字体后⾯加 “/50px”，表⽰⾏⾼ */
font: bold italic normal 30px/50px 微软雅⿊, 宋体, Serif;
}
/* 错误的写法 */
.p1 {
/* 在此设置⾏⾼也不会起作⽤ */
line-height: 100px;
/* 在字体后⾯未设置⾏⾼，会使⽤默认值⽽不是⽤上⾯设置的⾏⾼ */
font: bold italic normal 30px 微软雅⿊, 宋体, Serif;
}
/* 正确的写法 */
.
p1 {
/* 在字体后⾯未设置⾏⾼ */
font: bold italic normal 30px 微软雅⿊, 宋体, Serif;
/* ⾏⾼ */
line-height: 100px;
}
/* 正确的写法 */
.p1 {
/* 在字体后⾯设置⾏⾼ "/100px" */
font: bold italic normal 30px/100px 微软雅⿊, 宋体, Serif; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。