CSS基础-14-行高
3.1行高
★作用:控制一行的上下行间距
★属性名: line-height
★取值:
· 数字+px
· 倍数 (当前标签font-size的倍数)
★应用:
- 让单行文本垂直居中可以设置line-height :文字父元素高度
2. 网页精准布局时, 会设置line-height: 1 可以取消上下间距
★行高与font连写的注意点:
· 如果同时设置了行高和font连写,注意覆盖问题
· font : style weight size/line-height family ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* line-height: 50px; */
/* 自己字号的1.5倍 */
line-height: 1.5;
/* 66px 宋体 倾斜 加粗 行高2倍 */
font: italic 700 66px/2 宋体;
}
</style>
</head>
<body>
<p>2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。</p>
</body>
</html>
发布于 2021-12-07 15:06