首頁 > web前端 > html教學 > html設定怎麼文字的位置

html設定怎麼文字的位置

青灯夜游
發布: 2022-01-12 15:40:54
原創
53533 人瀏覽過

html設定文字位置的方法:首先使用position屬性設定文字元素的定位類型(絕對定位或固定定位);然後使用top、bottom、left和right屬性設定文字元素偏移值,進而設定文字元素的位置。

html設定怎麼文字的位置

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

html設定文字位置的方法:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			p#p1{
				position: absolute;
				top: 20px;
				left: 20px;
			}
			p#p2{
				position: absolute;
				bottom: 0px;
				right: 20px;
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="html設定怎麼文字的位置" >
		<p id="p1">测试文本!测试文本!</p>
		<p id="p2">测试文本!测试文本!</p>
	</body>

</html>
登入後複製

效果圖:

html設定怎麼文字的位置

##說明:

position 屬性規定元素的定位類型。

這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會產生一個區塊級框,而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置偏移。

值描述#absolute##產生絕對定位的元素,相對於static 定位以外的第一個父元素進行定位。 fixed產生絕對定位的元素,相對於瀏覽器視窗進行定位。 relative產生相對定位的元素,相對於其正常位置進行定位。 static

元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

因此,"left:20" 會在元素的 LEFT 位置新增 20 個像素。

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或 z-index 宣告)。
top 屬性

規定元素的頂部邊緣。此屬性定義了一個定位元素的上外邊距邊界與其包含區塊上邊界之間的偏移。 對於相對定義元素,如果top 和bottom 都是auto,其計算值則都是0;如果其中一個為auto,則取另一個值的相反數;如果二者都不是auto, bottom 將取top 值的相反數。

bottom 屬性

規定元素的底部邊緣。此屬性定義了定位元素下外邊距邊界與其包含區塊下邊界之間的偏移。 對於絕對定位元素,bottom屬性設定單位高於/低於包含它的元素的底邊。對於相對定位元素,bottom屬性設定單位高於/低於其正常位置的元素的底邊。

left 屬性

規定元素的左邊緣。此屬性定義了定位元素左外邊距邊界與其包含區塊左邊界之間的偏移。

right 屬性

規定元素的右邊緣。此屬性定義了定位元素右外邊距邊界與其包含區塊右邊界之間的偏移。 對於 static 元素,為 auto;對於長度值,則為對應的絕對長度;對於百分比數值,為指定值;否則為 auto。對於相對定義元素,left 的計算值總是等於 right。

推薦教學:

html影片教學

css影片教學#

以上是html設定怎麼文字的位置的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板