有问题加微信咨询:zhishidaquan6

广告赞助

无极3娱乐平台 > 编程语言 > DIV+CSS教程 > INTRODUCE

无极3娱乐平台报道css中text-indent应用总结_最新娱乐天地运动上无极3娱乐平台官网

2013-04-01 00:49 作者:电脑知识大全 来源:www.diannaodiy.net 扫瞄: 次
css中text-indent应用总结

 
css中的text-indent以前一直没有用过这个属性,今天在修改网站的时刻发现了这个挺有用的属性就来做个总结。希望对大家能够用肯定的帮助。

 

我将会从下面几个方面来进行说明:

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

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

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

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

5.继承

6.总结

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

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

各扫瞄器都能够正常的显示。如图:

css中text-indent应用总结

 

 

我们也能够通过负的text-indent来制作一些效果,各扫瞄器体现相同(demo2):

css中text-indent应用总结

二、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元素



(责任编辑:电脑知识大全)
------分隔线----------------------------
特别说明

◎ 广告赞助

◎ 阅读说明READ EXPLANATION

⊙电脑知识大全是一个专注电脑知识分享的开放平台!
⊙请记住我们的域名diannaodiy.net
⊙转载请注明出处,电脑知识大全diannaodiy.net
⊙如果遇到什么问题,请到本站留言板留言,我们会及时处置的!

Sitemap
条评论