HTML의 세 가지 레이아웃은 무엇입니까?

흐름 레이아웃(html 웹 페이지의 기본 레이아웃)

(동영상 튜토리얼 공유: html 동영상 튜토리얼)

특징:

1 블록 요소는 포함 요소 내에서 위에서 아래로 배치됩니다. 기본적으로 블록 요소의 너비는 100%이므로 분포를 순서대로 수직으로 확장합니다.

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

플로팅 레이아웃(float)

특징: 기본 레이아웃에서 블록 요소는 너무 강해서 한 줄을 차지합니다. 이제 두 개의 블록 요소를 원합니다. 나란히 쇼를 하려고요. 이를 달성하려면 float를 사용해야 합니다.

다음과 같습니다

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

3. 레이어 모델

특징: div를 다른 div 위에 배치하려면 절대 위치 지정을 사용하여 완료해야 합니다. , 고정

절대

은 위치:절대(절대 위치 지정을 나타냄)를 설정해야 합니다. 이 문의 기능은 요소를 문서 흐름 밖으로 끌어낸 다음 상대적인 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 사용하는 것입니다. 위치 지정 속성이 있는 가장 가까운 상위 항목에 포함된 블록은 절대적으로 배치됩니다. 그러한 포함 블록이 없으면 본문 요소, 즉 브라우저 창을 기준으로 합니다.

relative

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

fixed

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

참고:

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

관련 권장 사항: html 튜토리얼

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