css中indent是什么意思,css文本属性中的text-indent的解析

文字属性text-indent是设置文字首行缩进的，任何元素都可以让首行以给定的长度缩进，长度甚至可以是负数；但只对快元素生效!

p{text-align:2em;}

这条规则使任何段落的首行缩进2个字符大小。

通常，text-indent可应用于任何块级元素，但不能应用于内联元素，也不能用于替换元素，如,但是，如果段落首行有一个图像，那么它将随文本一起移动。

text-indent支持负的文本缩进，如p{text-indent:-2em;}

这里所有的段落的首行就会向前移动2个文字大小。不过使用负的text-indent时要注意文字跑出元素外面，这样你要的效果可能反而就得不到了。

这里需要注意的是百分比的使用，百分比是指相对于父元素的值，如果设置5%的缩进值，那么此元素的首行将按其父元素的宽度的5%进行缩进。如：p{width:400px;}

p{text-indent:5%;}

这是一段文字，测试文本缩进百分比的使用

我们可以看到首行文字缩进了20px，计算原理就是父元素400x5% = 20px，当然这里得注意p元素没有设置宽度，设置了宽度就按本身宽度的百分比来计算。

然而，text-indent中最有趣的估计是继承，它继承的是计算值，而非声明值。如body{width:500px;}

p{width:400px;text-indent:10%;}

p{width:200px;}

这是外面的文字

这是里面的文字

这里便可以看到两段文字的首行都缩进了50px，而不是外面的文字50px，p元素中的文字缩进40px，可见它继承的是计算值，而不是声明值。

css中indent是什么意思,css文本属性中的text-indent的解析相关推荐

java中常用的包、类、以及包中常用的类、方法、属性----sql和text\swing
java中常用的包.类.以及包中常用的类.方法.属性常用的包 java.io.*; java.util.*; java.lang.*; java.sql.*; java.text.*; java.a ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
java程序中，数据验证，如何判断输入的文本框中的值是不是int型？
String str1=jTextField1.getText(); str1=str1.replaceAll("[0-9]","");//将所有的数字型字符替 ...
文本编辑器中实现自动换行的功能
文章目录 1 文本编辑器中实现自动换行的功能 1 文本编辑器中实现自动换行的功能实现思路: 获取当前文本编辑框的换行模式. 将模式进行反转后并进行设置. 更新对应QAction对象的状态. 槽函数的 ...
一文读懂文本处理中的对抗训练
作者丨WenZe.Leo 单位丨追一科技AI Lab研究员背景与研究意义深度学习技术的快速发展,大幅提升了众多自然语言处理任务(比如文本分类,机器翻译等)的效果,越来越多的深度学习模型被用于现实生 ...
Java 反射将配置文件数据加载到对象属性中
Java 反射将配置文件数据加载到对象属性中 Java 反射可以根据类名找到相应的类,也可以将配置文件中的值加载到对应属性中. 需要用到的包:spring-core-3.1.2.Release.ja ...
css中indent是什么意思,css中text-indent用法及与padding的区别详解
语法: text-indent : length 参数: length : 百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值.请参阅长度单位说明: 检索或设置对象中的文本的缩进. 在被另一 ...
html中加一个框与底部平齐,div+CSS实现单选复选框与文本对齐
在进行div+css布局的过程中,很多同学发现表单单选框与复选框不能跟文本对齐,下面青岛星网跟大家分享:div+CSS实现单选复选框与文本对齐的方法. HTML范例代码单选框line-height: ...

css中indent是什么意思,css文本属性中的text-indent的解析

css中indent是什么意思,css文本属性中的text-indent的解析相关推荐

最新文章

热门文章