行高(line height)
- 指文字占有的实际高度,可以将行高设置为和高度一样的值,使单行文字在元素中垂直居中;
- 可以通过line height来设置行高,也可以直接指定一个大小(px em),也可以直接为行高设置一个整数(当指定为一个整数时,行高将为字体的指定倍数);
- 行高经常用来设置文字的行间距(行间距=行高-字体大小);
- 行高会在字体框上下平均分配;
字体框
即为字体存在的格子,设置font-size实际上就是在设置字体框的高度;
字体相关属性(font)
设置字体相关的所有属性;
语法
行高可以不写,不写时则使用默认值;
font: 字体大小/行高 字体族
![font](https://i-blog.csdnimg.cn/blog_migrate/32e2bf77132ac93cd2602c76e802063a.png)
font-size
字体大小;
font-weight
字重,字体的加粗;
可选值 | |
---|
normal | 默认值,不加粗 |
bold | 加粗 |
100-900 | 字体加粗的九个级别,与个人电脑字体有关,一般电脑不会自带九个级别的字体 |
![normal](https://i-blog.csdnimg.cn/blog_migrate/eaf75b80cdec1ef30e6570ca085a5579.png)
![bold](https://i-blog.csdnimg.cn/blog_migrate/be80edc2983443d7d32843e1f715aabe.png)
font-style
字体风格;
![normal](https://i-blog.csdnimg.cn/blog_migrate/d11d6745aef5f832b378bc33b3dee139.png)
![italic](https://i-blog.csdnimg.cn/blog_migrate/1f94eb2b9068f2a39acb2a3415d2e6ec.png)
文本
文本的水平对齐(text-align)
可选值 | |
---|
left | 左侧对齐 |
right | 右侧对齐 |
conter | 居中 |
justify | 两端对齐 |
![left](https://i-blog.csdnimg.cn/blog_migrate/9973bc535d529278b84111a6b256acd3.png)
![right](https://i-blog.csdnimg.cn/blog_migrate/90ea526eecac3c2e140f79e37e6fbe4e.png)
![center](https://i-blog.csdnimg.cn/blog_migrate/1673b7aea0facaedba374a3f50c52973.png)
![justify](https://i-blog.csdnimg.cn/blog_migrate/3842b60e3d36aba2603decd178721198.png)
文本的垂直对齐(vertical-align)
可选值 | |
---|
baseline | 默认值,基线对齐 |
top | 顶部对齐 |
bottom | 底部对齐 |
middle | 居中对齐 |
其它文字的样式
text-decoration 设置文本修饰
可选值 | |
---|
none | 什么都没有 |
underline | 下划线 |
line-through | 删除线 |
![none](https://i-blog.csdnimg.cn/blog_migrate/8245e0555e75248d4c910e1470b274a0.png)
![underline](https://i-blog.csdnimg.cn/blog_migrate/6c00f8aee6e108da295399885d011317.png)
![line-thought](https://i-blog.csdnimg.cn/blog_migrate/c6523ab40409659475c65d4cd98391f9.png)
![overline](https://i-blog.csdnimg.cn/blog_migrate/dde7176aec39e5821b588968a6303e0f.png)
white-space 设置网页如何处理空白
可选值 | |
---|
normal | 正常 |
nowrap | 不换行 |
pre | 保留空白 |
![normal](https://i-blog.csdnimg.cn/blog_migrate/65a9d435978ee363e7473fc8e27e5ec8.png)
![nowrap](https://i-blog.csdnimg.cn/blog_migrate/555cc66a7f521a478e7a5719152f7c35.png)
![pre](https://i-blog.csdnimg.cn/blog_migrate/e7e8960fcf28c85ffe58c4b27076b97f.png)