携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，[点击查看活动详情] (juejin.cn/post/712312… "juejin.cn/post/712312…") >>
一.行高
div{ font-size: 50px;
/* 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 */
line-height: 200px;
复制代码
/*
行高（line height）
- 行高指的是文字占有的实际高度
- 可以通过line-height来设置行高
行高可以直接指定一个大小（px em）
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
- 行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
字体框
- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
*/
border: 1px red solid;
/* line-height: 1.33; */
/* line-height: 1; */
/* line-height: 10 */
复制代码
二.字体的简写属性
div{ border: 1px red solid;
/*
font 可以设置字体相关的所有属性
语法：
font: 字体大小/行高 字体族
行高 可以省略不写 如果不写使用默认值
*/
/* font-size: 50px;
font-family: 'Times New Roman', Times, serif; */
font-weight: bold;
/* font: 50px/2 微软雅黑, 'Times New Roman', Times, serif; */
/* font: normal normal 50px/2 微软雅黑, 'Times New Roman', Times, serif; */
font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif;
/* font:50px 'Times New Roman', Times, serif;
line-height: 2; */
/* font-size: 50px; */
/* font-weight 字重 字体的加粗
可选值：
normal 默认值 不加粗
bold 加粗
100-900 九个级别（没什么用）
font-style 字体的风格
normal 正常的
italic 斜体
/* font-weight: bold; */
/* font-weight: 500;
font-style: italic; */
复制代码
三.字体的样式
`1.
div{`** width: 800px; border: 1px red solid;
/*
text-align 文本的水平对齐
可选值：
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
*/
/* text-align: justify; */
font-size: 50px;
}
span{
font-size: 20px;
border: 1px blue solid;
/*
复制代码
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
*/
vertical-align:baseline;
}
p{
border: 1px red solid;
}
img{
vertical-align: bottom;
}
复制代码
2.
| .box1{ | |
|---|---|
| font-size: 50px; | |
| font-family: 微软雅黑; | |
| /* | |
| text-decoration 设置文本修饰 | |
| 可选值： | |
| none 什么都没有 | |
| underline 下划线 | |
| line-through 删除线 | |
| overline 上划线 | |
| */ | |
| /* text-decoration: overline; */ | |
| /* text-decoration: underline red dotted; */ | |
| } | |
| .box2{ | |
| width: 200px; | |
| /* | |
| white-space 设置网页如何处理空白 | |
| 可选值： | |
| normal 正常 | |
| nowrap 不换行 | |
| pre 保留空白 | |
| */ | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } |
作者：Adopt
链接：juejin.cn/post/712875…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
