一周一章前端书·第18周：《HTML与CSS进阶教程》S02E05

第7章：文本效果

7.1 常用的文本基础的样式属性

属性	说明
text-decoration	文本装饰，可以设置下划线、删除线、顶划线
text-transform	文本装换，可以将文本进行大小写转换
font-variant	文本变形，可以将英文文本准换成“小型”大写字母
text-indent	设置段落首行缩进
text-align	设置文本水平对齐
vertical-align	设置文本垂直对齐
line-height	行高
letter-spacing	单词的间距
word-spacing	词语的间距

7.2 深入text-indent

• text-indent属性除了可以定义段落的首行缩进之外，还有另外一个设置LOGO的技巧。
• 由于搜索引擎无法识别图片，只能识别文字。我们通过一个

  标签中设置背景图片指定LOGO，然后通过text-indent:-9999px来隐藏标题的文字内容，以便进行更好的SEO优化。

    
        
        
        
    
    
        
LOGO
    

解答疑惑：

1. 为什么不通过display:none来隐藏文字，而是通过text-indent:-9999px来隐藏文字？因为搜索引擎默认忽略display:none的内容
2. 为什么是-9999px，而不是-999px或-99px？设置这一数值主要是为了让文本的缩进足够大，即便是大分辨率的显示屏也看不到文字，而如今还没有哪台电脑的屏幕宽度能大于9999px

7.3 深入text-align

• 我们可以通过text-align设置元素中文本或图片的水平对齐方式，常见取值有：left(居左)、right(居右)、center(居中)、justify(两端对齐，由于会产生一些问题，实际开发中少用)。

7.3.1 text-align起作用的元素

• text-align属性对block元素是不起作用的，起作用的元素只有文本、inline元素、inline-block元素。

7.3.2 text-align:center和margin:0 auto的区别

• text-align:center用于设置文字、inline元素、inline-block元素的水平居中，应用于父元素；
• margin:0 auto用于设置block元素的水平居中，应用于当前元素；

7.4 深入line-heingt

7.4.1 关于line-heingt的概念

顶线、中线、基线和底线

• 所谓顶线、中线、基线和底线，对应的是英文簿英文单词的四条线，值得注意的是，基线是倒数第二条线，而底线才是最下面的线。

行高、行距与半行距

• 行高指的是“两条基线之间的垂直距离”
• 行距则是上一行的底线到下一行底线的垂直距离，或者说两行文字之间的空隙
• 半行距就是行距的一半

内容区与行框

• CSS中一行文字可以看成一个“行盒子”，而内容区，是指行盒子顶线到底线之间的垂直距离
• 行框是指两行文字“行半距分割线”之间的垂直距离

7.4.2 height和line-height的区别

• line-height定义的是每行文字的高度，而height定义的是整个段落的高度。比如将height和line-height定义成一样，可以实现单行文字垂直居中的效果。

7.4.3 line-height的取值

取值为百分比或em值

• 当line-height值为百分比值或者em值时，当前元素的行高是根据父元素的font-size值来计算的。计算公式如下：

line-height = (父元素 font-size) × (百分比)
line-height = (父元素 font-size) × (em值)

取值为当前元素font-size的倍数

• 当line-height属性值为无单位的数值时，则以当前元素的font-size值来计算，计算公式如下：

line-height = (当前元素 font-size) × (无单位数字)

7.5 深入vertical-align

7.5.1 vertical-align使用的元素

• vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式，该元素就是定义了vertical-align属性的元素。

恭喜发财，新年好
2018年
财源广进，身体棒

• vertical-align对inline元素、inline-block元素和table-cell元素有效，对block元素无效。
• table-cell元素设置vertical-align属性和inline元素、inline-block元素设置是有区别的：
  • inline元素和inline-block元素的vertical-align定义的是周围的元素相对于当前元素的对齐方式；
  • table-cell元素的vertical-align是针对自身而言的，定义的是内部子元素现对于自身的对齐方式；

7.5.2 vertical-align的取值

• vertical-align属性取值有三种情况：负值、百分比和关键字。

• vertical-align属性最常用的取值成关键字：

  取值	说明
  top	顶线对齐
  middle	中线对齐
  baseline	基线对齐
  bottom	底线对齐

• vertical-align还可以取值为负值，表示元素相对基线向下偏移，此方法常用于解决单选框或者复选框与文字垂直对齐的问题。

• vertical-align属性取值可以为百分比，是相对于当前元素所继承的line-height属性值决定的。例如当前元素定义line-height:20px;vertical-align:50%;，则实际上等价于vertical-align:10px，表示该元素相对基线向上偏移10px