HTML에서 텍스트 위치를 설정하는 방법
- 青灯夜游원래의
- 2021-05-20 12:56:5653488검색
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>렌더링:
설명:
위치 속성 은 요소의 위치 지정 유형을 지정합니다.
이 속성은 요소의 레이아웃을 설정하는 데 사용되는 위치 지정 메커니즘을 정의합니다. 모든 요소를 배치할 수 있지만 절대 또는 고정 요소는 요소 자체의 유형에 관계없이 블록 수준 상자를 생성합니다. 상대적으로 배치된 요소는 일반 흐름의 기본 위치에서 오프셋됩니다.
| 값 | 설명 |
|---|---|
| absolute |
정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다. |
| fixed |
브라우저 창을 기준으로 절대 위치의 요소를 생성합니다. 요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다. |
| relative |
일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다. |
| static | 기본값입니다. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다. |
top 속성 은 요소의 위쪽 가장자리를 지정합니다. 이 속성은 위치가 지정된 요소의 상단 여백 경계와 포함 블록의 상단 경계 사이의 오프셋을 정의합니다.
상대 정의 요소의 경우 상단과 하단이 모두 자동이면 계산된 값은 둘 다 0입니다. 둘 중 하나가 자동이면 다른 값의 반대가 자동이 되며 하단이 상단이 됩니다. 가치의 반대.
bottom 속성은 요소의 아래쪽 가장자리를 지정합니다. 이 속성은 위치가 지정된 요소의 아래쪽 여백 경계와 포함 블록의 아래쪽 경계 사이의 오프셋을 정의합니다.
절대 위치에 있는 요소의 경우 하단 속성은 해당 요소를 포함하는 요소의 하단 가장자리 위/아래에 단위를 설정합니다. 상대적으로 위치가 지정된 요소의 경우 하단 속성은 요소의 하단 가장자리를 일반 위치 위/아래 단위로 설정합니다.
left 속성 은 요소의 왼쪽 가장자리를 지정합니다. 이 속성은 위치가 지정된 요소의 왼쪽 여백 가장자리와 포함 블록의 왼쪽 가장자리 사이의 오프셋을 정의합니다.
right 속성 은 요소의 오른쪽 가장자리를 지정합니다. 이 속성은 위치가 지정된 요소의 오른쪽 여백 가장자리와 포함 블록의 오른쪽 가장자리 사이의 오프셋을 정의합니다.
정적 요소의 경우, 길이 값의 경우 해당 절대 길이이고, 그렇지 않은 경우에는 지정된 값입니다. 상대적으로 정의된 요소의 경우 왼쪽은 항상 오른쪽으로 평가됩니다.
추천 튜토리얼: html 비디오 튜토리얼, css 비디오 튜토리얼
위 내용은 HTML에서 텍스트 위치를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!