8.css行高三种设置和垂直居中及简写方式
2020-02-17 本文已影响0人
欣博客
在CSS并没有为我们提供一个直接设置行间距的方式
我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
通过设置line-height可以间接的设置行高，
可以接收的值：
- 直接就设置一个大小
- 可以指定一个百分数，则会相对于字体去计算行高
- 可以直接传一个数值，则行高会设置字体大小相应的倍数
1.直接设置一个大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-size: 20px;
line-height: 43px;
}
</style>
</head>
<body>
<p class="p1">
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。
</p>
</body>
</html>
预览效果:
image.png
2.设置百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-size: 20px;
line-height: 200%;
/*line-height: 2;*/
}
</style>
</head>
<body>
<p class="p1">
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。
</p>
</body>
</html>
预览效果:
image.png
3.设置数值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
font-size: 20px;
/*line-height: 200%;*/
line-height: 2;
}
</style>
</head>
<body>
<p class="p1">
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。
</p>
</body>
</html>
预览效果:
image.png
使用行高来设置垂直居中
对于单行文本来说，可以将行高设置为和父元素的高度一致，
这样可以是单行文本在父元素中垂直居中
预览效果:
image.png
可以通过font简写,来设置一个行高
在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简写行高设置</title>
<style type="text/css">
.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 12px/40px "微软雅黑";
}
</style>
</head>
<body>
<p class="p2">
猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
</body>
</html>
预览效果图:
image.png
