| 1234567891011121314151617181920212223242526272829303132333435363738 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=div, initial-scale=1.0">
- <title>行高</title>
- <style>
- /*
- 行高（line height）
- -行高指的是文字占有的实际高度
- -可以通过line-height来设置行高
- 行高可以直接指定一个大小（px em）
- 也可以直接为行高设置一个整数
- 如果是一个整数的话，行高将会是字体的指定的倍数
- 默认行高是1.33倍
- -行高经常还用来设置文字的行间距
- 行间距=行高 - 字体大小
- 字体框
- -设置字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
- 行高会在字体框的上下平均分配
- */
- div{
- font-size: 50px;
- /* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中,高度可以省略不写 */
- /* height: 200px; */
- line-height: 200px;
- border: 1px red solid;
- line-height: 100px;
- /* line-height: 2; */
- }
- </style>
- </head>
- <body>
- <div>今天天气真不错 Hello World</div>
- </body>
- </html>
|
