html設定怎麼文字的位置
- 青灯夜游原創
- 2021-05-20 12:56:5653457瀏覽
html設定文字位置的方法：首先使用position屬性設定文字元素的定位類型（絕對定位或固定定位）；然後使用top、bottom、left和right屬性設定文字元素偏移值，進而設定文字元素的位置。
本教學操作環境：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>效果圖：
##說明：
position 屬性規定元素的定位類型。
這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個區塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置偏移。| 描述 | |
|---|---|
| ##產生絕對定位的元素，相對於static 定位以外的第一個父元素進行定位。 |
元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| 產生絕對定位的元素，相對於瀏覽器視窗進行定位。 |
元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| 產生相對定位的元素，相對於其正常位置進行定位。 |
因此，"left:20" 會在元素的 LEFT 位置新增 20 個像素。 |
| 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或 z-index 宣告）。 |
規定元素的頂部邊緣。此屬性定義了一個定位元素的上外邊距邊界與其包含區塊上邊界之間的偏移。 對於相對定義元素，如果top 和bottom 都是auto，其計算值則都是0；如果其中一個為auto，則取另一個值的相反數；如果二者都不是auto， bottom 將取top 值的相反數。
bottom 屬性規定元素的底部邊緣。此屬性定義了定位元素下外邊距邊界與其包含區塊下邊界之間的偏移。 對於絕對定位元素，bottom屬性設定單位高於/低於包含它的元素的底邊。對於相對定位元素，bottom屬性設定單位高於/低於其正常位置的元素的底邊。
left 屬性規定元素的左邊緣。此屬性定義了定位元素左外邊距邊界與其包含區塊左邊界之間的偏移。
right 屬性規定元素的右邊緣。此屬性定義了定位元素右外邊距邊界與其包含區塊右邊界之間的偏移。 對於 static 元素，為 auto；對於長度值，則為對應的絕對長度；對於百分比數值，為指定值；否則為 auto。對於相對定義元素，left 的計算值總是等於 right。
推薦教學：
html影片教學以上是html設定怎麼文字的位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！