文本效果-学习笔记

搜索引擎优化

  text-indext

• 定义h1背景图片未logo时，使用“text-indext: -9999px;”来隐藏h1的文字内容。

text-align

• text-align对文字、inline元素以及inline-block元素起作用。

“text-align: center;”与“margin: 0 auito;”的区别

• “text-align: center;”实现的是文字、inline元素以及inline-block元素的水平居中。
• “margin- 0 auto;”实现的是块元素的水平居中。
• “text-align: center;”在父元素中定义，“margin: 0 auto;”在当前元素中定义。

line-height取值

• 百分比：line-height = (父元素font-size) ✖ (百分比)
• em值：line-height = (父元素font-size) ✖ (em值)
• 无单位数字：line-height = (当前元素的font-size) ✖ (无单位数字)

vertical-align取值

• “周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。
• vertical-align属性对inline、inline-block、table-cell类型元素有效，对块元素无效。
• 百分比：相当于当前元素所继承的line-height属性值决定的。
• 负值：-2px，表示元素相对于基线向下偏移2px。

转载于:https://juejin.im/post/5a5de1576fb9a01c9e45f86b