1. 플로팅 요소에 대해 기억해야 할 몇 가지 사항이 있습니다.
먼저 플로팅 요소는 어떤 방식으로든 문서의 일반적인 흐름에서 제거됩니다. 여전히 레이아웃에 영향을 줍니다.
2. CSS의 고유한 방식을 채택하여 플로팅 요소는 거의 "자체 그룹"에 속하지만 여전히 문서의 나머지 부분에 영향을 미칩니다.
3. 요소를 "둘러싸게" 됩니다. 부동 요소 주변의 여백은 병합되지 않습니다.
4. 부동하지 않음: float:none은 요소가 부동하는 것을 방지하는 데 사용됩니다.
Floating의 내용을 자세히 이해하기 전에 먼저 컨테이닝 블록이 무엇인지 알아야 합니다.
플로팅 요소의 포함 블록은 가장 가까운 블록 수준 상위 요소입니다.
css는 부동 요소의 배치를 제어하는 일련의 규칙을 제공합니다.
부동 요소의 왼쪽(또는 오른쪽) 외부 경계는 포함 블록의 왼쪽(또는 오른쪽) 내부 경계를 초과할 수 없습니다. 부동 요소의 왼쪽(또는 오른쪽) 외부 경계는 나중에 발생하는 부동 요소의 상단이 그렇지 않은 경우를 제외하고 소스 문서에서 이전 왼쪽 부동(또는 오른쪽 부동) 요소의 오른쪽(또는 왼쪽) 외부 경계여야 합니다. 먼저 발생한 부동 요소의 하단 아래.
왼쪽 부동 요소의 오른쪽 외부 테두리는 오른쪽 부동 요소의 오른쪽 외부 테두리 오른쪽에 있지 않습니다.
플로팅 요소의 상단은 상위 요소의 내부 상단보다 높을 수 없습니다.
플로팅 요소의 상단은 이전의 모든 플로팅 요소 또는 블록 수준 요소의 상단보다 높을 수 없습니다.
플로팅된 요소가 소스 문서의 다른 요소 앞에 오는 경우 플로팅된 요소의 상단은 해당 요소에 의해 생성된 상자를 포함하는 모든 줄 상자의 상단보다 높을 수 없습니다.
왼쪽(또는 오른쪽) 측면 부동 요소의 (오른쪽) 또 다른 부동 요소가 있습니다. 전자의 오른쪽 외부 테두리는 포함 블록의 오른쪽(왼쪽) 테두리의 오른쪽(왼쪽)에 있을 수 없습니다.
플로트 요소는 다음과 같은 높이에 배치되어야 합니다. 가능
왼쪽 플로팅 요소는 가능한 한 왼쪽으로 이동해야 하며, 오른쪽 플로트 요소는 가능한 한 오른쪽으로 이동해야 합니다.
3. 실제 동작
4. 음수 여백 음수 여백으로 인해 부동 요소가 상위 요소 밖으로 이동할 수 있습니다. 음수 여백을 설정하면 부동 요소가 상위 요소보다 더 넓게 나타날 수 있는 것과 마찬가지로 요소가 상위 요소보다 더 넓게 나타날 수 있습니다.
5. 플로팅 요소, 콘텐츠 및 오버랩
또 다른 흥미로운 질문은 플로팅 요소가 일반적인 흐름에서 콘텐츠와 겹치면 어떻게 되나요?
인라인 상자가 플로팅 요소와 겹치면 테두리, 배경 및 콘텐츠가 모두 플로팅 요소 "상단"에 표시됩니다.
블록 상자가 플로팅 요소와 겹치면 테두리와 배경이 플로팅 요소 "아래"에 표시되고 콘텐츠는 플로팅 요소 "위"에 표시됩니다.
6. Clear
1. 기본 개념
relative:
절대:
요소 상자는 문서 흐름에서 완전히 제거되고 포함 블록(문서의 다른 요소 또는 초기 포함 블록일 수 있음)을 기준으로 배치됩니다. 일반적인 문서 흐름에서 해당 요소가 이전에 차지했던 공간은 해당 요소가 존재하지 않는 것처럼 닫힙니다. 블록 수준 상자는 일반 흐름에서 원래 생성된 상자 유형에 관계없이 요소가 배치된 후에 생성됩니다.
수정됨:
요소 상자는 위치를 절대값으로 설정하는 것처럼 동작하지만 포함 블록은 창 자체입니다.
플로팅 요소의 경우 포함 블록은 가장 가까운 블록 수준 상위 요소로 정의됩니다.
위치 지정의 경우 상황이 더 복잡합니다.
- "루트 요소"의 포함 블록(초기 포함 블록이라고도 함)은 사용자 에이전트에 의해 설정됩니다. HTML에서 루트 요소는 html 요소이지만 일부 브라우저는 body를 루트 요소로 사용합니다.
- 위치 값이 상대 또는 정적인 루트가 아닌 요소의 경우 포함 블록은 가장 가까운 블록 수준 상자, 테이블 셀 또는 인라인 블록 조상 상자의 내용으로 제한됩니다.
- 루트가 아닌 요소의 경우 위치 값이 절대적이면 포함 블록은 위치 값이 정적이 아닌 가장 가까운 조상 요소로 설정됩니다.
우리는 세 가지 위치 지정 메커니즘을 도입했으며 네 가지 속성을 사용하여 포함 블록을 기준으로 위치 지정 요소의 각 면의 오프셋을 설명했습니다. 우리는 이 네 가지 속성을 오프셋 속성이라고 부르는데, 이는 위치 결정을 완료하는 데 중요한 부분입니다.
- 상단과 하단의 경우 포함 블록의 높이를 기준으로 합니다
- 오른쪽과 왼쪽의 경우, 포함 블록의 너비를 기준으로 이러한 속성은 포함 블록의 가장 가까운 가장자리로부터의 오프셋을 설명하므로 오프셋이라고도 합니다.
마찬가지로 max-width 및 max-height 속성을 사용하여 요소의 크기를 제한할 수도 있습니다.
상황;
- visible:
기본값, 요소 상자 외부에서도 요소의 내용을 볼 수 있음을 나타냅니다. 일반적으로 이로 인해 콘텐츠가 자체 요소 상자 너머로 확장되지만 상자 모양은 변경되지 않습니다.
- 숨김:
요소의 콘텐츠는 요소 상자 경계에서 잘리고, 사용자가 클리핑 영역 너머의 콘텐츠에 액세스할 수 있도록 스크롤 인터페이스가 제공되지 않습니다.
-스크롤:
요소의 콘텐츠는 요소 상자의 경계에서 잘리지만 사용자가 사용할 수 있는 스크롤 메커니즘이 제공됩니다.
7. 콘텐츠 클리핑
8. 요소 가시성
- 보이는
- 보이지 않는 숨겨진.
- 붕괴
- 상속
visibility:collapse
테이블 요소에 사용되는 경우 이 값은 행이나 열을 제거하지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간은 다른 내용을 위해 비워집니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다. visibility:hidden
가시성을 설정하여 요소가 "보이지 않음" 상태가 되어도 해당 요소는 여전히 보이는 것처럼 문서 레이아웃에 영향을 미칩니다. 즉, 요소가 여전히 존재하므로 볼 수 없습니다. 이는 보이지 않을 뿐만 아니라 display:none과도 다릅니다. 문서에서도 삭제되므로 문서 레이아웃에는 영향을 주지 않습니다. 9. 절대 위치 지정
자동 가장자리 오프셋
일반적으로 요소의 크기와 위치는 포함 블록에 따라 다릅니다. 각 속성의 값도 어느 정도 영향을 미치지만 가장 중요한 것은 해당 속성을 포함하는 블록입니다.
교체되지 않은 요소와 교체된 요소의 위치 지정 규칙은 상당히 다릅니다. 교체된 요소에는 고유한 높이와 너비가 있으므로 크기가 변경되지 않기 때문입니다.
교체된 요소의 위치와 크기를 결정할 때 관련된 동작은 다음 규칙으로 가장 쉽게 설명됩니다.
- 너비가 자동으로 설정된 경우 사용되는 실제 너비는 요소 콘텐츠의 고유 너비에 따라 결정됩니다.
- 왼쪽에서 오른쪽으로 읽는 언어에서는 왼쪽의 값이 auto인 경우 auto를 정적 위치로 바꿉니다.
오른쪽에서 왼쪽으로 동일하게 적용됩니다.
- left 또는 right가 여전히 자동인 경우 margin-left 또는 margin-right의 자동 값을 0으로 바꿉니다.
- 현재 margin-left와 margin-right가 모두 자동으로 정의된 경우 동일한 값으로 설정하여 포함 블록의 요소를 중앙에 배치합니다.
- 이후 자동 값이 하나만 남으면 나머지 방정식과 같도록 수정합니다.
12. Z 축의 배치
13. 고정 위치 지정
14. 상대 위치 지정
위 내용은 CSS 부동 및 위치 지정의 정의 및 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
