CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、CSS字体属性

font-family（字体族）：指定字体的名称或类别。可以指定多个字体族，用逗号分隔，浏览器会按照指定的顺序依次寻找可用字体。可取值：
- 字体名称：如"Arial"、"Times New Roman"等。
- 通用字体系列：如"serif"、“sans-serif”、"monospace"等。
- 自定义字体系列：如"myFont, Arial, sans-serif"。
font-size（字号）：指定字体的大小。可取值：
- 绝对单位：如"px"、“pt”、“mm”、“cm”、“in”。
- 相对单位：如"em"、“rem”、“ex”、“ch”、“vw”、“vh”、“vmin”、“vmax”。
- 百分比：如"100%"、"200%"等。
font-weight（字重）：指定字体的粗细。可取值：
- 数字：如"100"、“400”、"700"等，表示相应的字重值。
- 关键字：如"normal"、“bold”、“bolder”、"lighter"等。
font-style（字体样式）：指定字体的风格。可取值：
- 关键字：如"normal"、“italic”、“oblique”。
- 继承值。
font-variant（字体变形）：指定字体的大小写形式。可取值：
- 关键字：如"normal"、“small-caps”。
- 继承值。
font-stretch（字体拉伸）：指定字体的紧缩或扩张程度。可取值：
- 关键字：如"normal"、“condensed”、“expanded”、“ultra-condensed”、“extra-condensed”、“semi-condensed”、“semi-expanded”、“extra-expanded”、“ultra-expanded”。
- 数字：如"50%"、"200%"等。
line-height（行高）：指定文本行的高度。可取值：
- 绝对单位：如"px"、“pt”、“mm”、“cm”、“in”。
- 相对单位：如"em（相对父元素的大小）"、“rem（相对根元素的大小）”、“ex（小写字母高度）”、“ch”、“vw”、“vh”、“vmin”、“vmax”。
- 数字：表示字体大小的倍数。
- 百分比：表示字体大小的百分比。
- 行高相关注意点：
  1、行内元素高度由行高撑开（默认1.32倍），而不是字体的高度。就算字体不设置高度也会被行高撑开。
  
  2、height ：line_hieight；行内元素上下垂直居中
  
  3、行高可以继承。一般可以给body设置
```
body {
line-light:1.5;
}
```
  4、line-height 等于 font-size + 上下所占行间距

**注意：**以上属性可以合并成一个font属性，如font: 16px/1.5 Arial, sans-serif;，其中斜杠前面的是字号，斜杠后面的是行高。

二、其他常见属性

color：xxx; 设置字体颜色
text-align : center; 设置文本水平方向居中，也可设left、right、justify(两端对齐)
Vertical-align 适用于行内、行内块元素

baseline ; 元素基线与父元素基线对齐

middle ; 元素中心线与父元素中心线对齐

top，bottom亦然

可以接收像素值，正上负下

解决图片底部存在间隙：

图片是行内元素，默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对其方式导致图片并不是与div的真实底部对齐，而是与文基线对齐。

解决方法：

给img（图片）设置display: block;

给img（图片）设置vertical-align: bottom;

修改line-height值为0或很小

父元素的font-size=0

text-index：设置文本缩进
text-decoration：none/underline（下划线）/line-throngh（贯穿线）/overline（上划线）文本装饰
text-transform: uppercase（转小写）/none/lowercase（转小写）/capitalize(首字母大写)
word-spacing: xx px; 英文单词间距
letter-spacing：字母之间间距
white-spacing :nowrap(不换行，中文会自动换行）/normal，设置中文是否换行
word-break: 强制换行，可取值keep-all（不换行）、break-all（换行，英文不会自动换行）

解决文本溢出问题方案：

单行文本溢出显示省略号
.overflow{
	width:200px
	overflow:hidden
	white-spacing:nowarp;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}
多行文本溢出显示省略号
.overflow{
	width:200px
	height:66px;
	overflow:hidden
	text-overflow:ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}
其他方法：定位或者专门的插件

利用伪类文章来源地址https://www.toymoban.com/news/detail-731040.html
.t:after{
  display: inline;
  content: "...";
  font-size: 16px;
}