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

1. 유동 레이아웃(HTML 웹 페이지의 기본 레이아웃 방법)

특징:

1. 아래의 기본 상태에서는 블록 요소가 포함 요소 내에서 위에서 아래로 순서대로 확장됩니다. , 블록 요소의 너비는 100%입니다.

2. 인라인 요소는 포함 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시됩니다. (인라인 요소는 블록 요소만큼 압도적이지 않고 한 줄을 차지합니다.)

2. 플로트 레이아웃(float)

특징: 기본 레이아웃에서는 블록 요소가 한 줄을 차지할 정도로 압도적입니다. 두 개의 블록 요소가 나란히 표시되기를 원합니다. 이를 달성하려면 float를 사용해야 합니다.

다음과 같습니다

p{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

3. 레이어 모델

특징: p가 다른 p 위에 오도록 하려면 절대 위치 지정을 사용하여 이를 완성해야 합니다. , 고정

absolute

이 문의 기능은 문서 흐름에서 요소를 드래그하는 것입니다.
왼쪽, 오른쪽, 위쪽, 아래쪽 속성 위치 지정 속성이 있는 가장 가까운 상위 포함 블록을 기준으로 절대적으로 위치 지정됩니다.
그러한 포함 블록이 없으면 본문 요소, 즉 브라우저 창을 기준으로 합니다.

relative

레이어 모델에서 요소의 상대 위치를 설정하려면 position:relative(상대 위치 지정을 나타냄)를 설정해야 합니다.
일반적인 문서 흐름에서 요소를 결정합니다. 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성 오프셋 위치.
상대 위치 지정 프로세스는 먼저 정적(부동) 모드에서 요소를 생성하고(요소는 레이어처럼 부동)
이전 위치를 기준으로 이동하는 것입니다. 이동 방향과 진폭은 왼쪽, 오른쪽, 위쪽, 아래쪽 속성이 결정되며 오프셋 전 위치는 변경되지 않습니다.

fixed

fixed: 절대 위치 지정 유형과 유사하게 고정 위치를 나타내지만
상대 이동 좌표는 뷰(화면 내 웹 페이지 창) 자체입니다.
뷰 자체는 고정되어 있으므로 브라우저 창의 스크롤 막대가 스크롤되어도 변경되지 않습니다.
화면에서 브라우저 창의 화면 위치를 이동하거나 브라우저 창의 표시 크기를 변경하지 않는 한,
따라서 고정된 위치의 요소 이는 항상 브라우저 창 내의 보기 어딘가에 위치하며 문서의 흐름에 영향을 받지 않습니다.
이것은 background-attachment:fixed 속성과 동일한 기능을 갖습니다.

Note

z-index 속성을 사용하는 경우 position 속성을 사용하는 요소만 z-index 속성을 갖습니다. position 속성을 사용하지 않는 요소에는 z-index 속성이 없으므로 설정해도 소용이 없습니다

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