HTML+CSS进阶学习摘录（文本效果）（四）

一 、深入text-indent

（1）"text-indent : 2em ;"实现段落首行缩进

（2）"text-indent: -9999 px ; " 隐藏标题h1内容，使用LOGO图片作为h1的背景图片。display:none 隐藏元素，搜索引擎会直接忽略（搜索引擎优化）。

二、深入text-align

      text-align对文字、inline元素以及inline-block元素起作用，但对块元素不起作用。img属于inline-block元素。

      对于块元素，需使用"display: inline-block;"转化后，"text-align: center;"才有效。

   " text-align:center；"与 "margin: 0 auto;" 的区别

   （1）" text-align:center；"实现的是文字、inline元素以及inline-block元素的水平居中。

    （2）"margin: 0 auto;" 实现的是对块元素的水平居中。

    （3）" text-align:center；"在父元素中 定义，"margin: 0 auto;"在当前元素中定义。

三、深入line-height

  行高（line-height）指的是两行基线之间的垂直距离 。

（1）定义height和line-height这两个属性值相等 ，就可以实现单行文字的垂直居中。

（2）line-height取值为百分比值、em值

     当前元素的行高是相对于父元素的font-size来计算的。

     line-height = (父元素 font-size ）* （百分比）

     line-height = (父元素 font-size）*（em值 ）

   子元素会继承父元素行高。

（3）line-height取值为无单位数字

     line-height = （当前元素的font-size）*（无单位数字）

   子元素会继承父元素的系数。

四、深入vertical-align

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

（2）vertical-align 对 table-cell类型元素有效。

（3）vertical-align取值 负值、百分比、关键字（top，middle，baseline，bottom）