@toc
QQ:3020889729 小蔡
line-height属性的作用
line-height属性是为了设置行高的。
line-height的属性值
line-height的属性值为常数加单位，单位为两种：em和px。（前者为当前单位字符大小，后者为像素大小）
像素作为属性值应用
css代码：
/* line-height属性探索 */
.xxp1 {
color: white;
background-color: black;
line-height: 40px;
/*设置40像素的大小行高*/
}
.xxp2 {
color: white;
background-color: red;
line-height: 100px;
/*设置40像素的大小行高*/
}
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-height属性探索</title>
<link rel="stylesheet" href="./演示css.css">
</head>
<body>
<div class="xxp1">
40px行高设置
</div>
<br>
<br>
<div class="xxp2">
100px行高设置
</div>
</body>
</html>
效果：
em作为属性值应用
css代码:
/* line-height属性探索 */
.xxp1 {
color: white;
background-color: yellow;
line-height: 4;
/*默认无单位的话，就是设置4个单位的行高*/
}
.xxp2 {
color: white;
background-color: blue;
line-height: 10em;
/*设置10单位的大小行高*/
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-height属性探索</title>
<link rel="stylesheet" href="./演示css.css">
</head>
<body>
<div class="xxp1">
4个单位行高设置
</div>
<br>
<br>
<div class="xxp2">
10个单位行高设置
</div>
</body>
</html>
效果:
