CSS 부동 및 위치 지정의 정의 및 사용법 소개

---

1. 플로팅

1. 플로팅 요소

1. 플로팅 요소에 대해 기억해야 할 몇 가지 사항이 있습니다.
먼저 플로팅 요소는 어떤 방식으로든 문서의 일반적인 흐름에서 제거됩니다. 여전히 레이아웃에 영향을 줍니다.
2. CSS의 고유한 방식을 채택하여 플로팅 요소는 거의 "자체 그룹"에 속하지만 여전히 문서의 나머지 부분에 영향을 미칩니다.
3. 요소를 "둘러싸게" 됩니다. 부동 요소 주변의 여백은 병합되지 않습니다.
4. 부동하지 않음: float:none은 요소가 부동하는 것을 방지하는 데 사용됩니다.

2. Floating의 자세한 내부 이야기

Floating의 내용을 자세히 이해하기 전에 먼저 컨테이닝 블록이 무엇인지 알아야 합니다.
플로팅 요소의 포함 블록은 가장 가까운 블록 수준 상위 요소입니다.
css는 부동 요소의 배치를 제어하는 ​​일련의 규칙을 제공합니다.

• 부동 요소의 왼쪽(또는 오른쪽) 외부 경계는 포함 블록의 왼쪽(또는 오른쪽) 내부 경계를 초과할 수 없습니다. 부동 요소의 왼쪽(또는 오른쪽) 외부 경계는 나중에 발생하는 부동 요소의 상단이 그렇지 않은 경우를 제외하고 소스 문서에서 이전 왼쪽 부동(또는 오른쪽 부동) 요소의 오른쪽(또는 왼쪽) 외부 경계여야 합니다. 먼저 발생한 부동 요소의 하단 아래.

• 왼쪽 부동 요소의 오른쪽 외부 테두리는 오른쪽 부동 요소의 오른쪽 외부 테두리 오른쪽에 있지 않습니다.

• 플로팅 요소의 상단은 상위 요소의 내부 상단보다 높을 수 없습니다.

• 플로팅 요소의 상단은 이전의 모든 플로팅 요소 또는 블록 수준 요소의 상단보다 높을 수 없습니다.

• 플로팅된 요소가 소스 문서의 다른 요소 앞에 오는 경우 플로팅된 요소의 상단은 해당 요소에 의해 생성된 상자를 포함하는 모든 줄 상자의 상단보다 높을 수 없습니다.

• 왼쪽(또는 오른쪽) 측면 부동 요소의 (오른쪽) 또 다른 부동 요소가 있습니다. 전자의 오른쪽 외부 테두리는 포함 블록의 오른쪽(왼쪽) 테두리의 오른쪽(왼쪽)에 있을 수 없습니다.

• 플로트 요소는 다음과 같은 높이에 배치되어야 합니다. 가능

• 왼쪽 플로팅 요소는 가능한 한 왼쪽으로 이동해야 하며, 오른쪽 플로트 요소는 가능한 한 오른쪽으로 이동해야 합니다.

• 3. 실제 동작

먼저 플로팅 요소가 상위 요소보다 키가 클 때 어떤 일이 발생하는지 살펴보겠습니다.

CSS2.1은 부동 요소 동작의 한 가지 측면을 명확히 합니다. 부동 요소는 모든 하위 부동 요소를 포함하도록 확장됩니다.

따라서 상위 요소를 플로팅 요소로 설정하면 해당 상위 요소 내에 플로팅 요소를 포함할 수 있습니다.

4. 음수 여백 음수 여백으로 인해 부동 요소가 상위 요소 밖으로 이동할 수 있습니다. 음수 여백을 설정하면 부동 요소가 상위 요소보다 더 넓게 나타날 수 있는 것과 마찬가지로 요소가 상위 요소보다 더 넓게 나타날 수 있습니다.

이 규칙은 이전 규칙과 모순되는 것 같습니다(플로팅 요소는 상위 요소 외부에 배치됨).

그러나 이전 섹션의 규칙을 주의 깊게 살펴보면 이것이 실제로 기술적으로 허용된다는 것을 알 수 있습니다. 플로트 요소의 내용은 상위 요소 내에 있어야 하지만 여백이 음수이므로 플로트 요소의 콘텐츠는 마치 자체 외부 경계를 덮는 것처럼 배치됩니다.

5. 플로팅 요소, 콘텐츠 및 오버랩

또 다른 흥미로운 질문은 플로팅 요소가 일반적인 흐름에서 콘텐츠와 겹치면 어떻게 되나요?

css2.1은 다음 규칙을 지정합니다.

인라인 상자가 플로팅 요소와 겹치면 테두리, 배경 및 콘텐츠가 모두 플로팅 요소 "상단"에 표시됩니다.

• 블록 상자가 플로팅 요소와 겹치면 테두리와 배경이 플로팅 요소 "아래"에 표시되고 콘텐츠는 플로팅 요소 "위"에 표시됩니다.

• 6. Clear

때로는 콘텐츠가 항상 플로팅 요소를 통해 흐르기를 원하지 않을 수도 있습니다. 예:

모든 h3 요소가 왼쪽 부동 요소의 오른쪽에 배치되지 않도록 하려면 h3{clear:left;}를 설정하면 됩니다. 이는 "h3의 왼쪽에 떠 있는 이미지가 없는지 확인하십시오"로 이해될 수 있습니다.

2. 위치 지정

1. 기본 개념

위치 지정을 사용하면 요소 상자가 표시되어야 하는 위치를 정확하게 정의할 수 있습니다. 정상 위치 또는 상위 요소인 다른 요소를 기준으로 브라우저 창 자체의 위치를 ​​설정합니다.

2. 위치 지정 유형

정적(초기값):

요소 상자는 정상적으로 생성되고, 블록 수준 요소는 문서 흐름의 일부로 직사각형 상자를 생성하며, 인라인 요소는 하나 이상의 줄을 생성합니다. 상자.

• 
  relative:

  요소 상자가 특정 거리만큼 오프셋되어 있습니다. 요소는 위치가 지정되지 않은 모양과 원래 차지했던 공간을 유지합니다.

• 절대:
  요소 상자는 문서 흐름에서 완전히 제거되고 포함 블록(문서의 다른 요소 또는 초기 포함 블록일 수 있음)을 기준으로 배치됩니다. 일반적인 문서 흐름에서 해당 요소가 이전에 차지했던 공간은 해당 요소가 존재하지 않는 것처럼 닫힙니다. 블록 수준 상자는 일반 흐름에서 원래 생성된 상자 유형에 관계없이 요소가 배치된 후에 생성됩니다.

• 수정됨:
  요소 상자는 위치를 절대값으로 설정하는 것처럼 동작하지만 포함 블록은 창 자체입니다.

3. 포함 블록

플로팅 요소의 경우 포함 블록은 가장 가까운 블록 수준 상위 요소로 정의됩니다.
위치 지정의 경우 상황이 더 복잡합니다.
- "루트 요소"의 포함 블록(초기 포함 블록이라고도 함)은 사용자 에이전트에 의해 설정됩니다. HTML에서 루트 요소는 html 요소이지만 일부 브라우저는 body를 루트 요소로 사용합니다.
- 위치 값이 상대 또는 정적인 루트가 아닌 요소의 경우 포함 블록은 가장 가까운 블록 수준 상자, 테이블 셀 또는 인라인 블록 조상 상자의 내용으로 제한됩니다.
- 루트가 아닌 요소의 경우 위치 값이 절대적이면 포함 블록은 위치 값이 정적이 아닌 가장 가까운 조상 요소로 설정됩니다.

4. 오프셋 속성

우리는 세 가지 위치 지정 메커니즘을 도입했으며 네 가지 속성을 사용하여 포함 블록을 기준으로 위치 지정 요소의 각 면의 오프셋을 설명했습니다. 우리는 이 네 가지 속성을 오프셋 속성이라고 부르는데, 이는 위치 결정을 완료하는 데 중요한 부분입니다.
- 상단과 하단의 경우 포함 블록의 높이를 기준으로 합니다
- 오른쪽과 왼쪽의 경우, 포함 블록의 너비를 기준으로 이러한 속성은 포함 블록의 가장 가까운 가장자리로부터의 오프셋을 설명하므로 오프셋이라고도 합니다.

5. 너비 및 높이

너비 및 높이 설정

위치 지정 요소에 특정 너비를 지정하려면 당연히 너비 속성을 사용해야 합니다. 마찬가지로 높이를 사용하여 특정 높이를 선언할 수도 있습니다. 배치된 요소.

너비 및 높이 제한

min-width 및 min-height를 사용하여 요소 콘텐츠 영역의 최소 크기를 정의할 수 있습니다.

마찬가지로 max-width 및 max-height 속성을 사용하여 요소의 크기를 제한할 수도 있습니다.

6. 콘텐츠 오버플로 및 클리핑

Overflow

어떤 이유로 요소가 특정 크기로 고정되어 있지만 콘텐츠가 요소에 맞지 않는다고 가정해 보세요. 이때 Overflow 속성을 사용하여 이를 제어할 수 있습니다.

상황; - visible:
기본값, 요소 상자 외부에서도 요소의 내용을 볼 수 있음을 나타냅니다. 일반적으로 이로 인해 콘텐츠가 자체 요소 상자 너머로 확장되지만 상자 모양은 변경되지 않습니다.
- 숨김:
요소의 콘텐츠는 요소 상자 경계에서 잘리고, 사용자가 클리핑 영역 너머의 콘텐츠에 액세스할 수 있도록 스크롤 인터페이스가 제공되지 않습니다. -스크롤:
요소의 콘텐츠는 요소 상자의 경계에서 잘리지만 사용자가 사용할 수 있는 스크롤 메커니즘이 제공됩니다.

7. 콘텐츠 클리핑

절대 위치에 있는 요소의 콘텐츠가 콘텐츠 상자를 넘고 콘텐츠가 클리핑되도록 오버플로가 설정된 경우 클립 속성을 사용하여 클리핑 영역의 모양을 변경할 수 있습니다.

clip:direct(top,right,bottom,left);

8. 요소 가시성

클리핑 및 오버플로 외에도 전체 요소의 가시성을 제어할 수도 있습니다.

가시성:

- 보이는
- 보이지 않는 숨겨진.
- 붕괴
- 상속

visibility:collapse
테이블 요소에 사용되는 경우 이 값은 행이나 열을 제거하지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간은 다른 내용을 위해 비워집니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다. visibility:hidden
가시성을 설정하여 요소가 "보이지 않음" 상태가 되어도 해당 요소는 여전히 보이는 것처럼 문서 레이아웃에 영향을 미칩니다. 즉, 요소가 여전히 존재하므로 볼 수 없습니다. 이는 보이지 않을 뿐만 아니라 display:none과도 다릅니다. 문서에서도 삭제되므로 문서 레이아웃에는 영향을 주지 않습니다. 9. 절대 위치 지정

블록 및 절대 위치 지정 요소 포함

요소가 절대 위치 지정되면 문서 흐름에서 완전히 제거됩니다. 그런 다음 포함 블록을 기준으로 위치가 지정됩니다. 이는 절대 위치에 있는 요소가 다른 요소를 덮거나 다른 요소에 의해 덮일 수 있음을 의미합니다.

 절대 위치 요소의 포함 블록은 위치 값이 정적이 아닌 가장 가까운 상위 요소입니다. 작성자는 일반적으로 요소를 절대 위치 요소의 포함 블록으로 선택하고 해당 위치를 상대 위치로 지정하며 오프셋이 없습니다.

자동 가장자리 오프셋

요소의 정적 위치라는 용어의 일반적인 의미는 일반 흐름에서 요소의 원래 위치입니다. 보다 구체적으로, "상단" 정적 위치는 포함 블록의 상단 가장자리에서 가상 상자의 상단 여백 가장자리까지의 거리입니다.

10. 대체되지 않은 요소의 배치 및 크기

일반적으로 요소의 크기와 위치는 포함 블록에 따라 다릅니다. 각 속성의 값도 어느 정도 영향을 미치지만 가장 중요한 것은 해당 속성을 포함하는 블록입니다.

11. 교체된 요소의 배치 및 크기

교체되지 않은 요소와 교체된 요소의 위치 지정 규칙은 상당히 다릅니다. 교체된 요소에는 고유한 높이와 너비가 있으므로 크기가 변경되지 않기 때문입니다.
교체된 요소의 위치와 크기를 결정할 때 관련된 동작은 다음 규칙으로 가장 쉽게 설명됩니다.
- 너비가 자동으로 설정된 경우 사용되는 실제 너비는 요소 콘텐츠의 고유 너비에 따라 결정됩니다.
- 왼쪽에서 오른쪽으로 읽는 언어에서는 왼쪽의 값이 auto인 경우 auto를 정적 위치로 바꿉니다.
오른쪽에서 왼쪽으로 동일하게 적용됩니다. - left 또는 right가 여전히 자동인 경우 margin-left 또는 margin-right의 자동 값을 0으로 바꿉니다. - 현재 margin-left와 margin-right가 모두 자동으로 정의된 경우 동일한 값으로 설정하여 포함 블록의 요소를 중앙에 배치합니다. - 이후 자동 값이 하나만 남으면 나머지 방정식과 같도록 수정합니다.

12. Z 축의 배치

는 z-index 속성에 의해 제어됩니다.

13. 고정 위치 지정

고정 위치 지정은 고정 요소의 포함 블록이 창이라는 점을 제외하면 절대 위치 지정과 매우 유사합니다. 고정 위치 지정을 사용하면 요소가 문서 흐름에서 완전히 제거되고 문서의 어떤 부분과 관련된 위치도 없습니다.

14. 상대 위치 지정

이해하기 가장 간단한 위치 지정 메커니즘은 상대 위치 지정입니다. 이 메커니즘을 채택하면 오프셋 속성을 사용하여 위치가 지정된 요소가 이동됩니다.

위 내용은 CSS 부동 및 위치 지정의 정의 및 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!