이번에는 CSS 레이아웃 모델을 가져오겠습니다. CSS 레이아웃 모델의 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
웹 페이지에서 요소에는 세 가지 레이아웃 모델이 있습니다.
1. 흐름 모델(Flow) 기본
2. 플로트 모델(Float)
인라인 요소
는 한 줄을 차지하는 블록 요소만큼 지배적이지 않습니다)모든 요소는 기본적으로 플로팅할 수 없지만 CSSdiv{float :left를 사용하여 플로팅으로 정의할 수 있습니다. ;} div{float:right;} 레이아웃에 따라 다양한 div에 대해 서로 다른 플로팅 방법을 설정할 수 있습니다. 3. 레이어 모델(Layer)레이어 모델에는 세 가지 형태가 있습니다: 1. 상대 위치 지정(위치
: 상대 위치)절대 위치 지정(위치: 절대 위치)
3. ( position: 고정) 레이어 모델에서 요소의 상대 위치를 설정하려면 일반에서 요소의 위치를 결정하는 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 목록 데이터가 렌더링되는지 모니터링하는 방법
위 내용은 CSS 레이아웃 레이아웃 모델의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!