CSS3 레이아웃 모델의 유형은 무엇입니까?

Css3 레이아웃 모델에는 세 가지 유형이 있습니다. 1. 기본 웹 페이지 레이아웃 모드인 흐름 모델(Flow) 2. 부동 속성으로 제어되는 부동 모델(Float) 3. 레이어 모델(Layer) "상대 위치 지정", "절대 위치 지정" 및 "고정 위치 지정" 세 가지 형태가 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에는 영어로 Flow, Layer 및 Float로 요약된 3가지 기본 레이아웃 모델이 포함되어 있습니다.

웹 페이지에서 요소에는 세 가지 레이아웃 모델이 있습니다.

• Flow 모델(Flow)

• Float 모델(Float)

• Layer 모델(Layer)

1. Flow 모델( Flow)

플로우(Flow) 모델은 기본 웹페이지 레이아웃 모드입니다. 즉, 기본 상태의 웹 페이지의 HTML 웹 요소는 흐름 모델에 따라 웹 페이지 콘텐츠를 배포합니다.

유체 레이아웃 모델에는 두 가지 일반적인 특성이 있습니다.

첫째, 블록 요소는 포함 요소 내에서 수직으로 확장되고 위에서 아래로 순서대로 배포됩니다. 기본적으로 블록 요소의 너비는 모두 100%이기 때문입니다. 실제로 블록 요소는 모두 행 형태로 위치를 차지합니다.

(각 스티커 메모는 원래 기본 너비와 높이를 표시합니다.)

두 번째 점은 흐름 모델에서 인라인 요소가 포함 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시됩니다. (인라인 요소는 행을 차지하는 블록 요소만큼 압도적이지 않습니다)

2. 부동 모델(Float)

모든 요소는 기본적으로 부동할 수 없지만 CSS를 사용하면 부동으로 정의할 수 있습니다

div{float:left;}　
div{float:right;}

레이아웃에 따라 다양한 div에 대해 다양한 플로팅 방법을 설정할 수 있습니다.

3. 레이어 모델(Layer)

레이어 모델에는 세 가지 형태가 있습니다.

1 상대 위치 지정(위치: 상대) position: relative)

2、绝对定位(position: absolute)

3、固定定位(position: fixed)

相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative

2. 위치 : 절대)

3. 고정 위치(위치: 고정)

상대 위치

레이어 모델에서 요소의 상대 위치를 설정하려면, 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 통해 일반 문서 흐름에서 요소의 오프셋 위치를 결정하는 position:relative(상대 위치 지정)를 설정해야 합니다. 이전 위치를 기준으로 이동하면 오프셋 이전 위치는 변경되지 않습니다. 상대 위치 지정을 사용하면 요소가 오프셋되더라도 오프셋되기 전의 공간을 계속 차지합니다.

 .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        .div2 {
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            position: relative;
            top: 100px;
            left: 100px;
        }
    <div class="div1"></div>
    <div class="div2"></div>

여기서 파란색 점선 상자는 relativ 사용을 나타냅니다. 위쪽과 왼쪽을 각각 100px로 설정하면 원래 위치, 즉 원래 위치를 기준으로 아래쪽과 오른쪽으로 100픽셀 이동했다는 의미입니다. 요소는 각 위치에서 왼쪽으로 100픽셀 위에 있습니다.

절대 위치 지정

레이어 모델에서 요소의 절대 위치를 설정하려면 position:absolute(절대 위치 지정을 나타냄)를 설정하고 해당 요소를 문서 흐름 밖으로 드래그한 다음 다음을 사용해야 합니다. 왼쪽, 오른쪽, 위쪽, 아래쪽 속성은 위치 지정 속성이 있는 가장 가까운 상위 포함 블록을 기준으로 절대적으로 위치가 지정됩니다.

그러한 포함 블록이 없는 경우(즉, 앞의 div에 위치 지정 속성이 설정되지 않은 경우) 이는 본문 요소, 즉 브라우저 창을 기준으로 합니다.

절대 위치로 설정된 요소는 문서 흐름에서 공간을 차지하지 않습니다. 요소가 절대 위치로 설정된 경우 문서 흐름에서 해당 위치는 삭제됩니다.

z-index를 통해 스택 순서를 설정할 수 있습니다. .

절대 위치 지정은 요소를 문서 흐름에서 벗어나게 하므로 공간을 차지하지 않습니다. 일반 문서 흐름에서 요소의 레이아웃은 문서 흐름에 여전히 다른 요소가 존재하지 않는 경우와 동일합니다. 요소를 무시하고 원래 공간을 채웁니다. 절대적으로 배치된 상자는 문서 흐름과 무관하므로 페이지의 다른 요소를 덮을 수 있습니다.

        .div1 {
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }
            <div class="div1"></div>

여기서 설정한 것은 위쪽과 왼쪽이므로 이때 위치 지정 속성은 브라우저의 왼쪽 상단을 원점으로 합니다. 마찬가지로 위쪽과 오른쪽을 설정하면 오른쪽 상단이 됩니다. 브라우저가 원산지입니다. 기타 같은 이유입니다.

고정 위치 지정

fixed: 고정 위치 지정을 나타내며 절대 위치 지정 유형과 유사하지만 상대 이동 좌표는 뷰(화면 내 웹 페이지 창) 자체입니다. 뷰 자체는 고정되어 있으므로 브라우저 창의 스크롤 막대가 스크롤되어도 변경되지 않습니다. 🎜

        .div1 {
            width: 100%;
            height: 10000px;
            border: 1px solid red;
        }

        .div2 {
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            position: fixed;
            top: 100px;
            left: 100px;
        }
     <div class="div1">
        <div class="div2"></div>
    </div>

🎜🎜🎜🎜🎜🎜🎜스크롤바가 바뀌어도 고정된 위치는 바뀌지 않습니다. 🎜

RELATIVE와 ABSOLUTE를 함께 사용하세요.

규칙:

1. 참조 위치 요소는 상대적 위치 요소의 선행 요소여야 합니다.

2. 위치 요소는 위치를 추가해야 합니다.

3. : 절대값, 오프셋에는 위쪽, 왼쪽, 오른쪽, 아래쪽을 사용합니다.

(학습 영상 공유: css 영상 튜토리얼)

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