携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

css属性多且杂，所以我常常是学了又忘，今天特地把前端中最常用的css属性整理记录，下面是文本篇，希望对你有所帮助。

文本

字体大小：font-size

字体的大小设置的是高度，宽度自动缩放

（如果既设置宽度也设置高度，那隶书那种宽宽的就变成正方形了）

字体粗细：font-weigth

英文设置：lighter 细体 bolder 粗体 normal 正常 （并不是每种字体都有细体，粗体）

数字设置：100-900

字体风格：font-style

下面两个都可以使字体倾斜，但略有不同

font-style : italic  //设置斜体
font-style : oblique //没有上一行的斜体样式，强制让该字体倾斜

给em设置为normal，目的是为了消除他的样式，但保留他的强调属性

em{
   font-style:normal;
}

字体：font-family

写多个字体时：

按照顺序检索，如果电脑上支持该字体，就选择第一个字体，不支持就依次往后

中间有空格的字体，有中文的字体 需要加引号

font-family: "Times New Roman",Georgia,serif;

文本对齐：text-align

左对齐：left 右对齐：right 居中对齐：center

文本缩进 : text-indent

• 情况1：在Input输入框前面想要有一个图标，则需要让输入框的文本缩进几个像素(免去了输入多个空格的麻烦）

• 情况2：让每个段落前面都有缩进(p标签）

给p标签加上text-indent的属性

文本装饰 : text-decoration

下划线：underline 去掉下划线：none 划掉标记：line-through

• ❓如何使单行文本在盒子中垂直+水平x'x居中

   text-align : center     //水平居中  
   line-height: div的height //垂直居中，行高等于盒子的高度                                                                                                            垂直居中：line-height (行高) = div的height
  

• ❓如何解决单行文本横向截断，显示省略号

  white-space: nowrap //不换行
  overflow-x: hidden //横向溢出隐藏
  text-overflow: ellipsis //隐藏部分加省略号
  
  

• ❓如何解决容器中多行文本居中

  将容器设置成display : table，将容器内的文本设置成display：table-cell（表格单元格），将容器内的文本设置成vertical-align：middle

• ❓如何使行内块和行内元素对齐？vertical-align

  文本span(行内元素）在图片img（行内块元素）旁边，想要文本在img的中部 ⇒ 利用vertical-align属性(定义行内元素在行框内的垂直对齐方式)

  <img src="http://baidu.com"></img>
  <span>123</span>
  
  //css样式，注意设置的不是span的样式，而是img的样式
  img{
       width:30px;
       border:1px solid #000;
  		 vertical-align: middle;
  }
  

  效果如图：