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

一、CSS字体属性

1. font-family（字体族）：指定字体的名称或类别。可以指定多个字体族，用逗号分隔，浏览器会按照指定的顺序依次寻找可用字体。可取值：

   • 字体名称：如"Arial"、"Times New Roman"等。
   • 通用字体系列：如"serif"、“sans-serif”、"monospace"等。
   • 自定义字体系列：如"myFont, Arial, sans-serif"。

2. font-size（字号）：指定字体的大小。可取值：

   • 绝对单位：如"px"、“pt”、“mm”、“cm”、“in”。
   • 相对单位：如"em"、“rem”、“ex”、“ch”、“vw”、“vh”、“vmin”、“vmax”。
   • 百分比：如"100%"、"200%"等。

3. font-weight（字重）：指定字体的粗细。可取值：

   • 数字：如"100"、“400”、"700"等，表示相应的字重值。
   • 关键字：如"normal"、“bold”、“bolder”、"lighter"等。

4. font-style（字体样式）：指定字体的风格。可取值：

   • 关键字：如"normal"、“italic”、“oblique”。
   • 继承值。

5. font-variant（字体变形）：指定字体的大小写形式。可取值：

   • 关键字：如"normal"、“small-caps”。
   • 继承值。

6. font-stretch（字体拉伸）：指定字体的紧缩或扩张程度。可取值：

   • 关键字：如"normal"、“condensed”、“expanded”、“ultra-condensed”、“extra-condensed”、“semi-condensed”、“semi-expanded”、“extra-expanded”、“ultra-expanded”。
   • 数字：如"50%"、"200%"等。

7. 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的真实底部对齐，而是与文基线对齐。

解决方法：

1. 给img（图片）设置display: block;
2. 给img（图片）设置vertical-align: bottom;
3. 修改line-height值为0或很小
4. 父元素的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;
}

其他方法：定位或者专门的插件

利用伪类

.t:after{
  display: inline;
  content: "...";
  font-size: 16px;
}