前端开发 HTML和CSS:深入了解text-indent

微信h5页面 前端开发|前端开发 大牛知乎|主流前端开发工具

在css中可以使用text-indent属性来定义段落的首行缩进。在之前“css单位”这一节中，我们学习了关于text-indent的一个技巧：使用“text-indent:2em;”来实现段落的首行缩进。在这一节，我们来深入学习text-indent的另外一个技巧。
有过开发经验的小伙伴们，或多或少会见过“text-indent:-9999px;”这种写法。“text-indent:-9999px;”一般用于LOGO部分。在搜索引擎优化中，h1是非常重要的标签。一般情况下，我们都是把网站的LOGO图片放到h1标签中。不过我们都知道，搜索引擎是无法识别图片，只能识别文字。为了更好地优化SEO，那该怎么做呢？
有一个很好的解决方法就是：指定h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。也就是说，我们使用LOGO图片作为h1标签的背景图片，然后使用“text-indent:-9999px;”来隐藏h1的文字内容。
举例：
html 代码

分析：
在这个例子中，使用“text-indent:-9999px;”隐藏了h1的内容。如果我们没有使用“text-indent:-9999px;”；

有些小伙伴可能会说，除了“text-indent:-9999px;”，我们还可以使用“display:none;”来隐藏文字，以便达到预期效果，实现代码如下：
html 代码

分析：
其实页面效果是达到了，但是搜索引擎却不吃这一套！为什么呢？对于使用“display:none;”来隐藏的文字，搜索引擎一般都把这些文字当做垃圾信息而被忽略，此时h1的权重会丢失。所以我们不建议使用这种方式。
对于“text-indent:-9999px”这个技巧，大家可以去查看一下绿叶学习网、w3cschool首页以及其他网站LOGO部分的源代码。实际上，这个技巧几乎在所有网站中都能用到，大家一定要认真掌握。
当然大家想要更好地理解这个技巧，也需要一定搜索引擎优化的知识。搜索引擎优化（即SEO），也是前端工程师必备知识之一。

【疑问】：
1、为什么定义text-indent为-9999px，而不是-999px、-99px呢？
一般电脑屏幕宽度有为1024px、1366px等，之所以定义为-9999px，那是为了让文字的缩进足够大，就算是大分辨率电脑下也看不到文字，因为没有哪台电脑的屏幕宽度大于9999px。如果你定义text-indent为-999px或者-99px，那么缩进的文字还是有可能会出现在浏览器窗口内。

2018前端开发怎么样|有缘网前端开发怎么样|微信公众号前端方面怎样开发