您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

[CSS教程]‘text-indent属性’是什么意思?和‘text-align属性’有什么区别

web前端 教育推动者 次浏览
我们知道如果不实用编辑器,我们怎么样才能使得一段话进行首行缩进呢?如果仅仅是代码实现按住空格是不能实现的,因为浏览器会默认不成立,或者说自动清除,因为浏览器不识别,如果不实用text-indent也是可以实现的,利用html转义字符,具体我们后面会给出(空格转义字符为 ),如果按照正规写法的话,text-indent是必须用的,下面我们来探究text文本属性。
 

text-indent属性定义

 
text-indent 属性规定文本块中首行文本的缩进。允许使用负值。如果使用负值,那么首行会被缩进到左边。
 

text-indent属性值

 
length       定义固定的缩进。默认值:0。(可以用像素px,也可以用em单位,1em=16px=12pt)
%      定义基于父元素宽度的百分比的缩进。
inherit      规定应该从父元素继承 text-indent 属性的值。
 
代码实现过程
 
<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
         .zhez{
           text-indent: 0.5em;
 }
         </style>
</head>
<body>
     <div class="zhez"> 文本</div> 
</body>
</html>
 
实现效果
 
text-indent

注意事项

 
1 实际上,text-indents属性是有它的局限性的,他在行内元素中会失效,行内元素是什么呢?大家可能并不是很了解,这里简单说一下,所谓行内元素就是没有自己的空间,它不受height、width的控制,即使你设置无限宽,它还是一动不动,解决这种问题的方法就是嵌套在其他块级元素中,当然利用margin属性及padding属性yekeyi解决。
 
2 text-indent 属性允许是负值,如果是负值的话,那么就是向左靠拢。
 
 
text-align属性详解
 

text-align定义

 
text-align 属性规定元素中的文本的水平对齐方式。
 

text-align属性值

 
left   把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center      把文本排列到中间。
justify       实现两端对齐文本效果。
inherit      规定应该从父元素继承 text-align 属性的值。
 
由于比较简单,这里不再一一讲解,重点是justify值,这个在中文中可能并不是很明显,但是在英文当中很是实用,因为这样看起来更加的美观。
 
text-align:justify的实现效果如下:


text-align
 
同样的,text-align同样只适用于块级元素。
 



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明[CSS教程]‘text-indent属性’是什么意思?和‘text-align属性’有什么区别
顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
自学网