css中text-indent的一些总结~

text-indent
这个css属性一般是用来设置文本的缩进，一般而言text-indent是只用在块级元素上面的，而不用在内联元素上面，text-indent的数值可以是正也可以是负（em或者px），还可以设置%例如：
1.使得任何段落首行缩进两个字符大小
p{
text-indent:2em;
}
2.使得段落首行向前移动2个字符大小
p{
text-indent:-2em;
}
3.%的使用，这里百分比是相对于父元素的值，假如设置10% 那么，这个元素相对于他的父元素的宽度进行10%的缩进，例如：
css样式
div{width: 300px;}
p{text-indent:10%;}

哈哈哈哈哈哈哈哈哈

我们可以得出，首段文字进行了300*10%=30px的缩进，这里的p元素没有设置宽度，按照文字的宽度去计算~ 而text-index继承的是计算值，而不是%或者em 或者px body{widht:500px;} div{width:400px;text-indent:10%;} p{width:200px;}

哈哈哈哈

呵呵呵呵

这里两段文字都进行了50px的缩进，500*0.1=50px p继承的是50px这个数值

另外，有时候，我们会利用text-indent来隐藏文字
如：
p{
text-indent:-2500px; //小，在高分辨率屏幕下，会隐藏失败
//text-indent: -99999px; //大，存在性能问题，设置被搜索引擎屏蔽掉
}
建议使用其他的文字隐藏方法，例如 display:none; overflow:hidden; position:absolute;等~