這篇文章給大家分享的是有關(guān)css實(shí)現(xiàn)首行縮進(jìn)效果的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

為奎屯等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及奎屯網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、奎屯網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

在css中，我們可以使用text-indent屬性來(lái)實(shí)現(xiàn)首行縮進(jìn)效果，

首先我們來(lái)了解一下有關(guān)于css text-indent屬性的相關(guān)知識(shí)。

text-indent 屬性可以設(shè)置文本塊（塊級(jí)元素）中首行文本的縮進(jìn)；它允許使用負(fù)值，但如果使用了負(fù)值，那么首行會(huì)被縮進(jìn)到左邊。

注意：在 CSS 2.1 之前，text-indent 總是繼承計(jì)算值，而不是聲明值。

下面介紹一下text-indent屬性可以通過(guò)下面的屬性值來(lái)設(shè)置首行的縮進(jìn)：

length：定義固定的縮進(jìn)，默認(rèn)值為0。

%：定義基于父元素寬度的百分比的縮進(jìn)。

我們通過(guò)簡(jiǎn)單的代碼示例來(lái)看看效果：

	
		
		
		
	
	
		

			
demo盒子寬500px時(shí)：
			
這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。text-indent:36px;
		    
這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。text-indent:10%;
		
	

效果圖：

當(dāng)我們把demo盒子的寬度設(shè)置為550px后，看看效果圖：

第一個(gè)p標(biāo)簽內(nèi)的段落文本縮進(jìn)效果沒(méi)有改變，但第二個(gè)p標(biāo)簽內(nèi)的段落文本縮進(jìn)長(zhǎng)度變大了，可以看出用%設(shè)置的縮進(jìn)是根據(jù)父元素的大小改變的。

下面我們就來(lái)看看css如何實(shí)現(xiàn)首行縮進(jìn)2個(gè)字符效果：

	
		
		
		
	
	
		

			
這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。這是一段測(cè)試代碼，是關(guān)于css文本縮進(jìn)的一段文字。
		
	

效果圖：

在這里我們使用到了一種長(zhǎng)度單位em，那么什么是em?

em是一種相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。而我們中文段落一般每段前空兩個(gè)漢字，實(shí)際上，就是首行縮進(jìn)了2em。

感謝各位的閱讀！關(guān)于css實(shí)現(xiàn)首行縮進(jìn)效果的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！