집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 레이아웃의 일반적인 유형은 무엇입니까? HTML의 세 가지 레이아웃 특성 분석

HTML 레이아웃의 일반적인 유형은 무엇입니까? HTML의 세 가지 레이아웃 특성 분석

不言원래의: 2018-08-04 16:51:0512481검색

HTML 레이아웃의 일반적인 유형은 무엇인가요? HTML에는 유동 레이아웃, 플로팅 레이아웃, 레이어 모델이라는 세 가지 레이아웃 방법이 있습니다. HTML의 세 가지 레이아웃 방법은 각각 고유한 특성을 가지고 있습니다. 이 기사에서는 HTML의 세 가지 레이아웃 방법의 특징에 대해 간략하게 설명합니다.

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

특징:

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

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

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의 세 가지 레이아웃 특성 분석

관련 기사