HTML 웹 페이지의 레이아웃 방법은 무엇입니까?

세 가지 HTML 레이아웃 방법 요약

1 일반 흐름

브라우저의 기본 레이아웃 방법인 일반 흐름이라고도 합니다. 일반 흐름은 대부분의 경우 웹 페이지에서 요소가 렌더링되는 방식입니다. 모든 HTML은 블록 상자(블록 수준 요소) 또는 인라인 상자(인라인 요소) 안에 있습니다. 브라우저가 HTML 문서 렌더링을 시작할 때 창 상단에서 시작하여 문서 콘텐츠 전체에 걸쳐 작업하는 요소에 필요한 공간을 할당합니다. 문서의 크기가 CSS에 의해 특별히 제한되지 않는 한, 브라우저는 전체 내용을 수용할 수 있도록 문서를 수직으로 확장합니다. 각각의 새로운 블록 수준 요소는 새로운 줄로 렌더링됩니다. 인라인 요소(인라인 요소/인라인 블록 수준)는 현재 줄이 경계를 만날 때까지 순서대로 가로로 렌더링된 후 세로 렌더링을 위해 다음 줄로 전환됩니다.

2 위치 지정 흐름

1> absolute, 절대 위치 지정: 절대 위치 지정 요소의 위치는 해당 요소에 가장 가까운 위치 지정 흐름(위치 지정 흐름)의 조상을 기준으로 합니다(상대/절대/고정). ) 요소에 따라 결정됩니다. 요소에 배치된 조상이 없는 경우 해당 위치는 초기 포함 블록(본문)을 기준으로 합니다.

요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다.

절대적으로 배치된 요소는 표준 흐름을 벗어났습니다. 표준 스트림에서 공간을 차지하지 않습니다.

절대 위치에 있는 요소는 블록 수준 요소/인라인 요소/인라인 블록 수준 요소를 구분하지 않습니다.

절대 위치에 있는 요소가 본문을 참조점으로 사용하는 경우 실제로는 전체 웹페이지의 너비와 높이가 아닌 웹페이지 첫 번째 화면의 너비와 높이를 참조점으로 사용합니다. 위치가 지정된 요소는 페이지가 스크롤됨에 따라 스크롤됩니다.

상자가 절대적으로 배치되면 margin: 0 auto를 사용할 수 없습니다. left: 50%를 사용할 수 있습니다. margin-left: - 요소 너비를 가운데로 설정합니다.

2> ; fixed, 고정 위치 지정: 고정 위치 지정은 일종의 절대 위치 지정으로 이해될 수 있습니다. 고정 위치 지정 요소는 브라우저 창을 기준으로 배치됩니다. 이를 통해 창의 고정된 위치에 항상 나타나는 요소를 생성할 수 있습니다.

요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정됩니다.

고정 위치 요소는 표준 흐름을 벗어나며 표준 흐름에서 공간을 차지하지 않습니다. 이는 표준 스트림에서 삭제된 것으로 이해될 수 있습니다.

고정 위치 요소는 블록 수준 요소/인라인 요소/인라인 블록 수준 요소를 구분하지 않습니다.

E6 이하 버전은 고정 위치 지정을 지원하지 않으며 자바스크립트를 사용하여 해결할 수 있습니다.

3> inherit, 상속: 상위 요소의 위치 속성 값을 상속합니다.

4> relative, 상대 위치 지정: 상대 위치 지정은 일반적인 흐름에서 이전 위치를 기준으로 이동하는 것을 의미합니다. 즉, 정상 위치를 기준으로 배치됩니다.

상대 위치 지정을 사용할 때 요소는 이동 여부에 관계없이 여전히 원래 공간을 차지하므로 요소를 이동하면 다른 상자를 덮게 됩니다.

상대 위치 지정에서는 같은 방향으로 하나의 위치 지정 속성만 사용할 수 있습니다.

상대 위치 지정은 표준 흐름을 벗어나지 않으므로 상대 위치 지정에서 블록 수준 요소/인라인 요소/인라인 블록 수준 요소를 구분합니다. 그리고 상대적으로 배치된 요소는 표준 흐름에서 위치를 차지하므로 상대적으로 배치된 요소에 대한 여백/패딩과 같은 속성을 설정하면 표준 흐름의 레이아웃에 영향을 미칩니다.

5> static, 정적 위치 지정: 기본값, 위치 지정 없음, 요소는 위쪽, 아래쪽, 왼쪽, 오른쪽 또는 z-인덱스 선언을 무시하고 일반 흐름, 즉 위의 일반 흐름에 나타납니다.

3 부동 흐름

플로팅 흐름에는 가로 조판이라는 한 가지 조판 방법만 있습니다. 요소를 왼쪽 또는 오른쪽 정렬로만 설정할 수 있습니다. 먼저 플로팅된 요소는 앞쪽에 표시되고, 나중에 플로팅된 요소는 뒤쪽에 표시됩니다.

플로팅 흐름에는 중심 정렬도 없고 중심 값도 없습니다. Margin: 0 auto는 플로팅 스트림에서 사용할 수 없습니다.

플로팅 흐름에서는 블록 수준 요소/인라인 요소/인라인 블록 수준 요소가 구분되지 않습니다. 블록 수준 요소/인라인 요소/인라인 블록 수준 요소이든 가로로 조판할 수 있습니다. 너비와 높이를 모두 설정할 수 있습니다.

요소가 부동으로 설정되면 표준 흐름(비표준)에서 분리되어 표준 흐름에서 공간을 차지하지 않습니다. 다음 요소가 현재 부동 상태가 아닌 경우 이 요소는 현재 다음 요소를 덮습니다.

1> inherit, 상속: 상위 요소의 float 속성 값을 상속합니다.

2> left, 왼쪽 부동: 요소가 왼쪽으로 부동합니다. 먼저 뜨는 것이 왼쪽에 있고 나중에 뜨는 것이 오른쪽에 있습니다.

3> none, 부동 상태 아님: 기본값.

4> right, 오른쪽 부동: 요소가 오른쪽으로 부동합니다. 먼저 뜨는 것이 오른쪽에 있고 나중에 뜨는 것이 왼쪽에 있습니다.

위 내용은 HTML 웹 페이지의 레이아웃 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!