웹 페이지에서 요소에는 세 가지 레이아웃 모델이 있습니다:
1, 흐름 모델(위치: 정적)
2. 왼쪽, 오른쪽)
3, 레이어 모델(위치: 절대, 고정, 상대)
더 특별한 레이아웃 방법은:
위치: 상대
"흐름 모델" 또는 "부동 모델"에서 요소가 차지하는 공간을 유지하고 요소의 표시 모드를 변경하지 않습니다: " 인라인" 또는 "울퉁불퉁". 요소가 원래 위치를 기준으로 이동하도록 지시할 뿐입니다. 하지만 결국 레이어 모델 레이아웃의 요소이므로 다른 요소와 겹치면 레이어가 아닌 모델 레이아웃의 요소 위에 표시됩니다. 또한, 상대 요소를 설정하면 요소는 완전한 상자 모델을 갖게 됩니다. 인라인 요소의 경우에도 높이, 위쪽 및 아래쪽 패딩, 위쪽 및 아래쪽 테두리 설정이 적용되며 이러한 설정은 차지하는 공간에 반영됩니다. 문서 흐름이 우수합니다.
Flow 모델
Flow는 기본 웹페이지 레이아웃 모드입니다. position:absolute; 또는 position:fixed; 속성을 정의하지 않고 float:left; 또는 float:right;가 정의되지 않은 모든 요소는
애니메이션 레이아웃 모드를 렌더링합니다. 기본적으로.
흐름 레이아웃 모델에는 4가지 일반적인 기능이 있습니다:
1, 블록 요소는 포함 요소 내에서 위에서 아래로 순서가 수직으로 확장됩니다. 기본적으로 블록 요소의 너비는 100%이기 때문입니다. 실제로 블록 요소는 요소에 포함된 콘텐츠의 양이나 요소의 너비를 얼마나 좁게 설정했는지에 관계없이 행 형태로 위치를 차지합니다.
2. 인라인 요소는 포함된 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시됩니다. 어떤 사람들은 이 배포 방법을 텍스트 흐름이라고 부릅니다. 텍스트 흐름은 본질적으로 HTTP 전송 방법 및 브라우저의 구문 분석 메커니즘과 밀접한 관련이 있습니다. 한 줄을 초과하면 자동으로 위에서 아래로 줄 바꿈되어 표시되고, 계속해서 왼쪽에서 오른쪽으로 순차적으로 흐릅니다. 물론 독자는 CSS 텍스트 속성을 사용하여 텍스트 흐름 방향을 강제할 수 있습니다.
3. 두 개의 인접한 블록 요소 또는 중첩된 블록 요소에 위쪽 및 아래쪽 여백이 정의된 경우 겹치는 결과는 둘 사이의 최대값입니다. 중첩된 겹침의 경우 상위 요소의 오버플로 속성 값을 "auto"로 정의하여 이러한 겹침을 방지할 수 있습니다.
4. 플로팅 요소의 여백은 겹치지 않습니다. 플로팅 요소가 블록 요소와 접촉할 때 그 뒤에 나타나는 요소를 사용하여 겹치는지 여부를 결정합니다. 프로그래밍 관점에서 보면 다음 요소를 표시하는 방법을 결정하는 것보다 이미 구성된 DOM 트리를 수정하는 것이 더 효율적입니다. 플로팅 요소가 블록 요소의 상위 요소인 경우 위의 규칙에 따라 겹쳐야 하지만 플로팅 요소는 내부 높이와 너비를 자동으로 계산하므로 결과 여백이 겹치지 않습니다.
플로팅 모델
플로팅은 흐름과 완전히 다른 레이아웃 모델이지만 여전히 플로팅할 수 있습니다. 흐름이 이에 미치는 잠재적인 영향을 확인하세요. 기본적으로 모든 요소는 부동으로 정의할 수 있지만 CSS를 사용하면 div, list, p, table, img와 같은 요소도 실제로는 모두 부동으로 정의할 수 있습니다. 이러한 인라인 요소는 부동 소수점으로 정의될 수도 있습니다.
플로팅 레이아웃 모델의 특징은 다음과 같습니다.
1. float로 정의된 모든 요소는 자동으로 블록 표시로 설정됩니다. 이렇게 하면 완전한 상자 모델이 완성됩니다.
2. 플로팅 요소의 너비를 지정하지 않으면 플로팅 요소는 콘텐츠를 담을 수 있는 너비로 자동 축소됩니다.
3. 플로팅 모델은 플로우 모델과 충돌하지 않습니다. 요소가 부동 레이아웃으로 정의되면 부동 요소는 일반 문서 흐름에서 임의로 부동되지 않으며 상단 가장자리는 부동으로 선언되지 않았을 때와 동일한 위치에 있습니다. 그러나 가로 방향에서는 부동 가장자리가 포함 요소의 가장자리에 최대한 가깝습니다(이 가장자리는 포함 요소 패딩의 내부 가장자리를 나타냄).
4. 일반 요소와 마찬가지로 플로팅 요소는 항상 포함 요소 내에 위치하며 레이어 레이아웃 모델과 달리 요소 포함 관계를 외부에 플로팅하거나 파괴하지 않습니다.
5. 주변 흐르는 요소의 문제에 대해. 플로팅 요소가 문서와 함께 흐를 수 있지만 플로팅 모델과 흐르는 모델 사이에는 여전히 근본적인 차이점이 있습니다. 플로팅 요소 뒤에 있는 인라인 요소는 플로팅 요소 주위로 흐르고 위의 텍스트에도 흐를 수 있습니다. 블록 요소는 다릅니다. 플로팅 요소가 전혀 존재하지 않는 것처럼 모든 플로팅 요소가 차지하는 공간을 무시하고 이러한 방식으로 흐름 모델에서의 위치를 결정합니다.
6. 플로팅 요소 간 병치 표시 문제에 대해. 두 개 이상의 인접한 요소가 플로팅으로 정의된 경우 플로팅 요소를 수용할 수 있는 충분한 공간이 있는 경우 플로팅 요소를 나란히 표시할 수 있습니다. 상단 가장자리는 같은 수준에 있습니다. 공간이 충분하지 않은 경우 후속 플로팅 요소는 이를 수용할 수 있는 위치로 아래로 이동됩니다. 이 아래쪽으로 이동하는 요소는 별도의 플로트를 생성할 수 있습니다. 많은 디자이너들은 유동 모델 레이아웃의 블록 요소를 나란히 표시할 수 없는 문제를 해결할 수 있기 때문에 유동 모델을 사용하여 웹 페이지를 레이아웃하는 것을 좋아합니다.
7. 플로팅할 때 플로팅 요소는 이전 플로팅 요소에 최대한 가까워지므로 다른 비플로팅 요소는 옆으로 밀려납니다. 압축할 수 없는 경우(예: 블록 요소 또는 인라인 요소와 이 부동 요소를 같은 줄에 표시할 공간이 충분하지 않은 경우)
다른 요소는 줄 바꿈되어 바로 다음에 표시됩니다. 이후의 이전 요소로.
8. 요약: 플로팅 요소는 여전히 문서 흐름에 있으며 문서 흐름 요소와 함께 위치하지만 문서 흐름의 공간을 차지하지 않습니다.
Float Clear
블록 요소만 인라인 요소 정의의 경우 명확한 속성을 정의할 수 있습니다. 클리어는 유효하지 않습니다. 블록 요소에 "clear:both"를 설정하면 구문 분석 시 왼쪽이나 오른쪽에 부동 요소가 표시되지 않습니다. 그러나
이 부동 요소인 경우(float 특성이 설정됨) 후속 부동 요소는 여전히 그 주위에 떠 있을 수 있습니다. 플로팅 요소가 명확한 속성을 정의하면 이전 객체에는 영향을 주지 않으며 후속 객체에도 영향을 주지 않습니다. 자체 레이아웃 위치에만 영향을 미칩니다. 여기서 영향을 받는다는 것은 다른 개체의 위치가 적극적으로 변경되지 않음을 의미합니다.
참고: 개인적으로 이 속성의 중국어 이름은 "clean"으로 번역하는 것이 더 좋습니다. 이는 구문 분석 시 현재 요소의 어느 쪽이 보장되는지 나타냅니다.
깨끗하고 부유물이 없습니다.
부동 중첩
플로팅 요소는 서로 중첩될 수 있으며 중첩 규칙은 플로팅 요소의 중첩과 동일합니다. 부동 포함 요소는 부동 하위 요소를 포함하도록 높이와 너비를 항상 자동으로 조정합니다. "float"을 정의하는 요소는 요소 내 부동 요소가 차지하는 너비와 높이를 자동으로 계산하여 일관되게 만듭니다. 그 안에 있는 내용에 적합 . 이 속성을 정의하지 않으면 너비와 높이가 자동으로 계산되지 않아 상위 요소의 너비와 높이가 비정상적으로 표시됩니다. 상위 요소의 overflow 속성을 "auto"로 정의하여 요소의 너비와 높이를 자동으로 확장할 수도 있습니다. .
플로팅 및 흐름 중첩
순수 흐름 중첩 사이 일반적으로 단순 플로팅 요소나 플로팅 요소를 유동 요소에 삽입하면 표시 효과가 매우 복잡해집니다. 이때 포함된 요소는 자체적으로 표시됩니다. 속성은 더 이상 하위 부동 요소의 영향을 받지 않습니다. 즉, 상위 요소는 하위 부동 요소의 높이에 적응할 수 없습니다. 부동 요소의 시작점은 포함 요소 내의 위치에 따라 결정되지만, 부동 요소는 포함 요소 위로 확장되며 이는 절대 위치 요소와 다소 유사합니다. .
레이어 모델
레이어 레이아웃 모델이 파생됩니다. from graphic 이미지 편집기에서 매우 인기 있는 레이어 편집 기능 레이어는 이미지를 정확하게 조작하고 편집할 수 있으며 그래픽 디자이너들에게 널리 환영받습니다. 그러나 웹 디자인 분야에서는 웹 페이지 크기의 이동성으로 인해 레이어가
게임이 호평을 받지 못했습니다. 레이어 레이아웃 모델을 지원하기 위해 CSS
는 위치 지정(위치 지정) 속성 집합을 정의합니다. 요소 위치 지정의 디자인 아이디어는 매우 간단합니다. 이를 통해 사용자는 웹 페이지 요소의 상대적 위치를 정확하게 정의할 수 있습니다. 여기서 상대 위치는 원래 요소 <🎜에 대해 표시되는 위치일 수 있습니다. > 또는 비교적 가장 가까운 Block 요소를 포함하거나 브라우저 창을 기준으로 합니다. 포지셔닝 유형
1.정적: 위치 지정이 없음을 나타냅니다. 명시적으로 그렇지 않은 경우 요소는 HTML기본 흐름 모델을 따릅니다. 요소의 위치 지정 클래스가 유형으로 선언된 경우 기본값은 이 값입니다.
2.절대: 는 절대 위치 지정을 의미하고 는 문서에서 요소를 제거합니다. 흐름 드래그한 다음 왼쪽, 오른쪽, 상단<🎜을 사용합니다. >, bottom 속성은 위치 지정 속성이 있는 가장 가까운 상위 포함 블록을 기준으로 절대 위치가 지정됩니다. 이러한 포함 블록이 없으면 body 요소에 상대적입니다. 즉, 브라우저 창에 따라 스택 순서는 z-index 속성을 정의합니다.
3.고정: 고정 위치를 나타냅니다. 절대 위치 지정 유형과 유사합니다. 그러나 그 포함 블록은 보기(화면 내의 페이지 창) 자체입니다. 뷰 자체가 고정되어 있기 때문에 브라우저 창의 스크롤바가 스크롤되는 대로 바뀌지 않으며, 화면에서 브라우저 창의 화면 위치를 이동하거나 브라우저 창의 표시 크기를 변경하지 않는 한 , 그래서 고정되었습니다 위치가 지정된 요소는 항상 브라우저 창 내 뷰의 어딘가에 위치하며 문서 흐름에 영향을 받지 않습니다. 이는 backgroundattachment:fixed와 일치합니다. ;속성 기능은 동일합니다.
4.상대: 상대 위치를 나타내며 왼쪽, 오른쪽<을 통과합니다. 🎜>, top, bottom 속성은 요소가 일반 문서 흐름에 있는지 여부를 결정합니다. (또는 부동 모델) 오프셋 위치에 있습니다. 상대 위치 지정 과정은 먼저 static(float)
메소드에 따라
요소를 생성한 후 요소의 방향과 진폭을 이동시키는 것입니다. 움직임은 left, right, top, <에 의해 결정됩니다. 🎜>하단 속성이 결정됩니다, 오프셋 전 요소의 모양과 위치가 유지됩니다
다음 섹션
