text-indent的用法包括块级元素等详细总结

网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设

最近在看文本相关的属性,觉得text-indent挺有意思的,就小小的总结了一下(这里不讨论用text-indent来隐藏文字)。

我将会从狼蚁网站SEO优化几个方面来进行说明

1.text-indent应用于块级元素

2.text-indent应用于行内元素

3.text-indent应用于替换元素

4.text-indent应用于inline-block元素

5.继承

6.总结

一、text-indent应用于块级元素

text-indent常用于段落首行2字符的缩进。我们先来看一下demo1(所有demo文章最后会提供下载地址)。

各浏览器都可以正常的显示。如图:

我们也可以通过负的text-indent来制作一些效果,各浏览器表现相同(demo2):

二、text-indent应用于行内元素

这里分两部分来说,一是text-indent应用于块级元素,块级元素里面有inline元素(通过继承或者指定text-indent),直接上demo3。

可见行内元素,虽然继承了text-indent的值(或者指定),却没有任何作用。

二是inline元素直接指定text-indent的值,或者块级元素不指定text-indent,而里面的inline元素指定。请看demo4。

chrome14、firefox7、opera10.6、safari5、ie8、ie9表现如下:

ie6/7表现如下:

比较一下,chrome14、firefox7、opera10.6、safari5、ie8没有作用于inline元素,但ie6/7却作用于inline元素,而且用于inline元素上,不同的条件表现也不同。

直接用于inline元素上:前面有32px的空白

块级元素不设置text-indent,而inline元素设置(inline前有文字):text-indent不会作用于inline元素。

块级元素不设置text-indent,而inline元素设置(inline前木有文字):text-indent会作用于inline元素,且与demo中设置的相同2em(24px,文字大小为12px)。

三、text-indent应用于替换元素

这里以应用到image与input元素为例进行说明,请看demo5。

chrome14、firefox7、opera10.6、safari5中的表现:没有作用于image,但却作用于了input,且中英文没有区别。

ie6/7中的表现:作用于image,且在input中,当为中文与英文时有不同的表现,从这点真不得不佩服ie6/7。还有更加有趣的,当你在全英文的输入框中改它的值时,又会有新的表现。

改变英文输入框的值后:

ie8、ie9中,没有作用于image,但却作用于了input,而且与ie6/7一样,英文与中文有上述的小bug。

改变英文的输入框的值后:

四、text-indent应用于inline-block元素

直接看demo6吧,结果说明一切(chrome14、firefox7、opera10.6、safari5、ie8、ie9中的表现)。

text-indent作用于inline元素

ie6/7的表现(作用于inline-block元素,而且前面多了32px):

五、继承

text-indent这个属性是可以继承的,引用权威指南上的一句话“在css2.1之前,text-indent总是继承计算值,而不是声明值。”。请看demo7。

非ie系列浏览器继承的均是计算值。

ie系列继承的却是声明值。

如果将父元素中的text-indent:2em;改成text-indent:28px,就不会有这个问题。

六、总结

看到这么多的不同点,您是不是感觉到很乱?如果你觉得不乱,那好,你是一牛人。不管你乱不乱,反正我是乱了。

所以,我给自己总结了一下:

1.text-indent只用于div,p这样的元素上,像image、input、inline-block、inline元素绝对不用。

2.text-indent的值如果子元素也要用到父元素的值,用px单位,而绝不用em。

最后,还是要说一下,本人水平有限,如有什么不当之处还请多指正。

最后附上所有demo下载地址:

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板