HTML+CSS 쉬운 입력 레이어 모델

레이어 모델이란 무엇인가요?

레이어 레이아웃 모델이란 무엇인가요? 레이어 레이아웃 모델은 이미지 소프트웨어 PhotoShop에서 매우 인기 있는 레이어 편집 기능과 같습니다. 각 레이어를 정확하게 배치하고 조작할 수 있습니다. 그러나 웹 디자인 분야에서는 웹 페이지 크기의 이동성으로 인해 레이어 레이아웃이 널리 사용되지 않았습니다. . 그러나 웹 페이지에서 로컬로 레이어 레이아웃을 사용하면 여전히 이점이 있습니다. HTML의 레이어 레이아웃에 대해 알아봅시다.

웹 페이지에서 HTML 요소를 정확하게 배치하는 방법은 이미지 소프트웨어 PhotoShop의 레이어와 마찬가지로 각 레이어를 정확하게 배치하고 작동할 수 있습니다. CSS는 레이어 레이아웃 모델을 지원하는 위치 지정 속성 집합을 정의합니다.

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

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

2. 상대 위치 지정(위치: 상대)

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

고정 위치아아아아

지속적인 학습
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>层模型</title> <style type="text/css"> #dv1{ width:100px; height:100px; background:green; margin-left:50px; margin-top:50px; position:absolute; /*绝对定位*/ } </style> </head> <body> <div id="dv1"></div> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~