介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>首行缩进& lt;/title>
& lt; style>
.demo {
宽度:500 px;
身高:200 px;
保证金:50 px汽车;
}
.p1 {
indent: 36 px;
}
.p2 {
indent: 10%;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>演示盒子宽500 px时:& lt;/p>
类& lt; p=皃1"祝辞;这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。你们;b> indent: 36 px; & lt;/b> & lt;/p>
类& lt; p=皃2"祝辞;这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。你们;b> indent: 10%; & lt;/b> & lt;/p>
& lt;/div>
& lt;/body>
& lt;/html> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>首行缩进& lt;/title>
& lt; style>
.demo {
宽度:550 px;
身高:200 px;
保证金:50 px汽车;
}
p {
indent: 2 em;/* em是相对单位,2 em即现在一个字大小的两倍*/}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。;/p>
& lt;/div>
& lt;/body>
& lt;/html>
这篇文章给大家分享的是有关css实现首行缩进效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
在css中,我们可以使用- indent属性来实现首行缩进效果,
首先我们来了解一下有关于<强> css - indent属性强的相关知识。
<强> - indent属性可以设置文本块(块级元素)中首行文本的缩进,它允许使用负值,但如果使用了负值,那么首行会被缩进到左边。
注意:在css 2.1之前,indent总是继承计算值,而不是声明值。
下面介绍一下- indent属性可以通过下面的属性值来设置首行的缩进:
长度:定义固定的缩进,默认值为0。
%:定义基于父元素宽度的百分比的缩进。
我们通过简单的代码示例来看看效果:
效果图:
当我们把展示盒子的宽度设置为550 px后,看看效果图:
第一个p标签内的段落文本缩进效果没有改变,但第二个标页签内的段落文本缩进长度变大了,可以看出用%设置的缩进是根据父元素的大小改变的。
下面我们就来看看css如何实现<强>首行缩进2个字符强效果:
效果图:
在这里我们使用到了一种长度单位<强> em 强,那么什么是他们吗?
<>强em 是一种相对长度单位,相对于当前对象内文本的字体尺寸。而我们中文段落一般每段前空两个汉字,实际上,就是首行缩进了2。
感谢各位的阅读!关于css实现首行缩进效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
