CSS 레이아웃 레이아웃 모델

이번에는 CSS 레이아웃 모델을 가져오겠습니다. CSS 레이아웃 모델의 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

웹 페이지에서 요소에는 세 가지 레이아웃 모델이 있습니다.
1. 흐름 모델(Flow) 기본
2. 플로트 모델(Float)

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

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

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

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

두 번째 점은 흐름 모델에서 인라인 요소가 포함 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시됩니다. (

인라인 요소

는 한 줄을 차지하는 블록 요소만큼 지배적이지 않습니다)

2. 플로팅 모델(Float)

모든 요소는 기본적으로 플로팅할 수 없지만 CSS

div{float :left를 사용하여 플로팅으로 정의할 수 있습니다. ;}　div{float:right;}

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

3. 레이어 모델(Layer)

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

1. 상대 위치 지정(

위치

: 상대 위치)

절대 위치 지정(위치: 절대 위치)

3. ( position: 고정)

relative positioning

레이어 모델에서 요소의 상대 위치를 설정하려면 일반에서 요소의 위치를 ​​결정하는 position:relative(상대 위치 지정을 나타냄)를 설정해야 합니다. 스트림의 왼쪽, 오른쪽, 위쪽 및

bottom

속성을 통해 문서화합니다.

이전 위치를 기준으로 이동하면 오프셋 이전 위치는 변경되지 않습니다. 상대 위치 지정을 사용하면 요소가 오프셋되더라도 오프셋되기 전의 공간을 계속 차지합니다.

절대 위치 지정

레이어 모델에서 요소의 절대 위치를 설정하려면 position:absolute(절대 위치 지정을 나타냄)를 설정하고 요소를 문서 흐름 밖으로 드래그한 다음 왼쪽, 위치 지정 속성이 있는 블록을 포함하는 가장 가까운 부모를 기준으로 오른쪽, 위쪽 및 아래쪽 속성이 절대적으로 배치됩니다. 그러한 포함 블록이 없는 경우(즉, 앞의 div에 위치 지정 속성이 설정되지 않은 경우) 이는 본문 요소, 즉 브라우저 창을 기준으로 합니다.

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

우리는

z-index

를 사용하여 설정할 수 있습니다. 쌓이는 순서.

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

플로팅 요소의 위치는 여전히 일반적인 문서 흐름을 기반으로 하며 문서 흐름에서 추출되어 가능한 한 왼쪽 또는 오른쪽으로 이동하며 텍스트 내용은 플로팅 요소를 둘러쌉니다. 문서 흐름의 표시만 변경할 뿐 문서 흐름을 벗어나지 않습니다. 이를 이해하면 위치 지정을 사용할 때와 플로팅을 사용할 때를 쉽게 파악할 수 있습니다.

고정 위치 지정

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

#div1{
position:fixed;
    bottom:0;
    right:0
}  (始终在屏幕由下端有一个div框，会一直跟着滚动条走)

상대 위치 지정은 절대 위치 지정과 혼합될 수 있습니다. 원칙은 다음과 같습니다. 상위 div가 위치 지정 속성을 정의하는 한 하위 div는 상위 div의 위치에 따라 위치가 변경됩니다.

이 방법을 익히셨을 것입니다. 이 사례를 읽어보신 후, PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

관련 읽기:

layer.photos()가 이미지 주소를 비동기적으로 변경한 후 비정상적인 표시 문제를 해결하는 방법

AngularJs 목록 데이터가 렌더링되는지 모니터링하는 방법

ES6 "클래스 "와 객체지향 관계

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