박스모델과 BFC에 대한 심층설명

이 글에서 공유한 내용은 박스 모델과 BFC에 관한 내용입니다. 도움이 필요한 친구들에게 참고가 되었으면 좋겠습니다.

표준 박스 모델과 IE 박스 모델

개발자라면 누구나 알고 있을 것입니다. , 역사적 문제와 확립된 표준의 개발로 인해 두 가지 CSS 상자 모델이 있습니다. 즉, W3C의 표준 박스 모델과 IE의 이상한 박스 모델입니다. CSS에서는 상자 크기 조정을 사용하여 요소의 상자 모델을 정의할 수 있습니다.

두 상자 모델의 차이점을 비교하기 전에 사진을 살펴보겠습니다.

요소의 구성 요소를 콘텐츠, 패딩, 테두리 및 여백으로 나누지는 않겠습니다. .

표준 상자 모델(box-sizing: content-box)은 W3C 표준의 기본 상자 모델입니다. 요소의 너비와 높이에는 패딩과 테두리가 포함되지 않는다고 규정하며, 렌더링 시 너비와 높이 계산 공식은 다음과 같습니다:

width = content width;
height = content height;

IE 상자 모델(box-sizing: border-box), on the 반대로, 너비와 높이는 실제로 패딩과 테두리를 포함하므로

width = content width + padding + border;
height = content height + padding + border;

이 시점에서 두 박스 모델의 차이점은 상당히 명확해야 합니다. 다음으로 BFC에 대해 이야기하겠습니다.

BFC란 무엇입니까

BFC, 즉 블록 서식 컨텍스트(Block Formatting Context)는 말 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. MDN의 정의는 다음과 같습니다.

블록 서식 컨텍스트는 웹 페이지의 시각적 CSS 렌더링의 일부이며 블록 상자의 레이아웃이 발생하고 부동 소수점이 다른 요소와 상호 작용하는 영역입니다.

입니다. 웹 페이지의 시각적 CSS 렌더링의 일부는 레이아웃 프로세스 중에 블록 수준 상자가 생성되는 영역이기도 합니다. 이는 또한 부동 요소가 다른 요소와 상호 작용하는 제한된 영역이기도 합니다. BFC를 깊이 이해하기 전에 먼저 살펴보겠습니다. "마진 오버랩"이 무엇인지.

병합 여백은 두 개 이상의 인접한 여백(상위 및 하위 요소 포함)이 하나의 여백으로 병합됨을 의미합니다. 소위 여백 인접성은 다음 두 가지 점에 기인할 수 있습니다.

이 두 개 이상의 여백

은
1. 비어 있지 않은 콘텐츠, 패딩, 테두리 또는 지우기

   로 구분되지 않습니다 .

   이 여백은 정상적인 흐름입니다.
BFC 원칙

Float 위치 지정 및 지우기는 동일한 BFC의 요소에만 적용됩니다.

• Floating은 다른 BFC의 요소 레이아웃에 영향을 주지 않지만, float 지우기는 동일한 BFC만 지울 수 있습니다. BFC에서 이전 요소의 부동

• 마진 붕괴는 동일한 BFC에 속한 블록 수준 요소 사이에서만 발생합니다.

• 따라서 우리는 BFC를 설정하여 마진 겹침의 발생을 방지하는 경우가 많습니다.

BFC 구축

다음과 같은 방법으로 요소를 BFC로 만들 수 있습니다.

floating(float 값은 없음이 아님)

• 절대적으로 배치된 요소(position의 값은 절대 또는 고정)

• 인라인 블록(디스플레이는 인라인 블록)

• 테이블 셀(디스플레이는 테이블, table-cell, table-caption 및 기타 HTML 테이블 관련 속성)

• 유연한 상자(디스플레이는 flex 또는 inline-flex)

• overflow가 표시되지 않습니다

BFC의 다른 응용 시나리오

1. BFC가 높이를 계산할 때 부동 요소를 포함하여 포함된 모든 요소가 계산에 포함됩니다. 따라서 BFC를 사용하여 플로트 제거 효과를 얻을 수도 있습니다.

BFC 생성 후:

2. BFC와 float 요소가 겹치지 않으므로 이 기능에 따라 적응형 2열 레이아웃을 구현할 수 있습니다. 왼쪽 요소가 플로팅 상태이므로 오른쪽 요소의 배경이 전체 컨테이너에 가려집니다.

올바른 요소를 BFC로 변경한 후:

위 내용은 박스모델과 BFC에 대한 심층설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!