89 lines
3.3 KiB
HTML
89 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>08_行高_注意事项</title>
|
||
<style>
|
||
#d1 {
|
||
font-size: 40px;
|
||
background-color: skyblue;
|
||
line-height: 0px
|
||
/*
|
||
若设置成0px时：
|
||
1.多行文字全部叠在一起 =》 行高 0 文字垂直间距0
|
||
2.背景颜色消失了 =》
|
||
3.文字顶部被”吃掉了“了一点点 =》
|
||
|
||
*/
|
||
}
|
||
|
||
/*
|
||
注意点2
|
||
1.大文字小文字默认基线对齐
|
||
2. 行高是可以继承的
|
||
*/
|
||
#d2 {
|
||
font-size: 40px;
|
||
background-color: skyblue;
|
||
line-height: 1.5;
|
||
/*
|
||
若设置成0px时：
|
||
1.多行文字全部叠在一起 =》 行高 0 文字垂直间距0
|
||
2.背景颜色消失了 =》
|
||
3.文字顶部被”吃掉了“了一点点 =》
|
||
|
||
*/
|
||
}
|
||
|
||
span {
|
||
font-size: 200px;
|
||
color: red;
|
||
}
|
||
/* 注意点3 : line-height和height是什么关系？
|
||
1. 设置了height，高度就是height的值
|
||
2.没有设置height，就根据line-height计算高度，高度就是 （line-height）行高*行数
|
||
*/
|
||
#d3 {
|
||
font-size: 40px;
|
||
background-color: yellowgreen;
|
||
line-height: 100px;
|
||
height: 300px;
|
||
}
|
||
|
||
#d4 {
|
||
font-size: 40px;
|
||
background-color: skyblue;
|
||
line-height: 0px;
|
||
}
|
||
/*
|
||
行高的应用场景1： 调整多行文字的间距
|
||
*/
|
||
#d5 {
|
||
font-size: 40px;
|
||
background-color: skyblue;
|
||
line-height: 100px;
|
||
}
|
||
/*
|
||
行高的应用场景2： 单行文字的垂直居中
|
||
|
||
备注： 只适用于单行文字的垂直居中，
|
||
且由于字体设计原因不是绝对的垂直居中
|
||
*/
|
||
#d6 {
|
||
font-size: 40px;
|
||
background-color: skyblue;
|
||
line-height: 300px;
|
||
height: 300px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- <div id="d1">天天向上 步步高升</div> -->
|
||
<!-- <div id="d2">逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。<span>逝</span>水无痕 天天向上 步步高升</div> -->
|
||
<!-- <div id="d3">逝水无痕 天天向上 步步高升。</div> -->
|
||
<!-- <div id="d4">逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。</div> -->
|
||
<!-- <div id="d5">逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。逝水无痕 天天向上 步步高升。</div> -->
|
||
<div id="d6">逝水无痕</div>
|
||
</body>
|
||
</html> |