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属性前,我们先来了解一下下面的几个概念。
在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有以下几方面的定义
vertical-align用于定义周围的文字,inline元素, inline-block元素相对于该元素的基线的对齐方式。其中该元素指的是设置了vertical-align属性的元素
vertical-align属性对block元素无效, td, 以及设置了table-cell属性的元素有效
vertical-align属性的取值都是相对于基线的
负值/百分比/关键字
在取百分比的时候其值是: 当前元素所继承的inline-height * 百分比
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。