2

text-indent

在上一篇文章中我们知道可以通过text-indent: 2rem属性可以实现首行缩进两个字符。现在我们来讲一下第二个技巧。
通过设置text-indent: -9999px来实现针对<h1>如果里面是<img>标签的情况下实现更好的SEO优化。在搜索引擎优化中, h1是非常重要的标签。一般情况下,我们会把logo放在<h1>标签中,但是我们知道搜索引擎是无法识别图片的。为了实现更好的SEO我们就可以应用这个技巧。

<!DOCTYPE html>
  <head>
  <title></title>
  <style>
    .seo {
      text-indent: -9999px;
      background: url('./image1.jpg') ;
      width: 400px;
      height: 300px;
    }
  </style>
  </head>
  <body>
    <h1 class="seo">搜索引擎优化</h1>
  </body>
</html>

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

text-align: center; 属性可以实现文字,inline元素,inline-block元素的居中。
margin: 0 auto; 可以实现block元素的居中。
margin: 0 auto;是在父元素中定义, 而text-align: center;是在父元素中定义。

line-height

在理解line-height属性前,我们先来了解一下下面的几个概念。

clipboard.png
在css中,每一行文字都可以看成有这四条线存在。当我们觉得我们的文字失控的时候,就要想想这四条线是否符合我们的预期了。
在vertial-align属性中的top,middle,baseline、bottom 这四个属性分别对应的是顶线,中线,基线,底线,而line-height属性则代表两行文字间的基线距离。

取值

如果line-height的单位是百分比的情况下,line-height: (父元素的font-size)* n%
如果单位是em/rem的情况下,line-height: (父元素的font-size)*(em|rem)
如果是无单位的情况下,line-height: (当前元素的font-size)*无单位数字
要注意很重要的一点line-height属性是可以被继承的,并且被继承的

vertial-align

W3C对vertical-align有以下几方面的定义

  1. vertical-align用于定义周围的文字,inline元素, inline-block元素相对于该元素的基线的对齐方式。其中该元素指的是设置了vertical-align属性的元素

  2. vertical-align属性对block元素无效, td, 以及设置了table-cell属性的元素有效

vertical-align属性的取值都是相对于基线的

负值/百分比/关键字
在取百分比的时候其值是: 当前元素所继承的inline-height * 百分比


wupengyu
1.8k 声望166 粉丝

写作是为了更好的思考