블록 수준 서식 컨텍스트를 만드는 방법은 무엇입니까? 블록 수준 포맷팅 컨텍스트의 역할-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

블록 수준 서식 컨텍스트를 만드는 방법은 무엇입니까? 블록 수준 포맷팅 컨텍스트의 역할

不言

Aug 03, 2018 pm 05:44 PM

CSS의 블록 수준 서식 컨텍스트란 무엇입니까? 블록 서식 컨텍스트는 웹 페이지에서 CSS의 시각적 렌더링의 일부이며 블록 상자의 레이아웃을 결정하는 데 사용됩니다. Positioning Scheme에서는 Normal Flow에 속합니다. 그러면 블록 수준 서식 컨텍스트를 만드는 방법은 무엇입니까? 블록 수준 서식을 생성하기 위한 요구 사항은 무엇입니까? 이번 글에서는 하나씩 설명드리겠습니다.

FC(서식 지정 컨텍스트)는 페이지 레이아웃의 영역을 참조하는 서식 지정 컨텍스트/서식 범위로 변환되며 자체 렌더링 규칙이 있고 자체 하위 요소가 배치되는 방식 및 다른 요소와의 관계를 결정합니다. . 및 기능.

CSS 표시 분류에 따르면 xhtml 요소는 블록 요소, 인라인 요소, 가변 요소의 세 가지 유형으로 나뉩니다. 페이지 요소에 스타일을 추가할 때 요소가 어떤 유형인지 알아야 하며 그런 다음 요소 유형을 직접 변환할 수 있습니다. 인라인 요소를 블록 요소(display: block)로 변환하기 위해 display를 사용할 수 있는 것과 같습니다. img라는 특수 요소가 여러 개 있으며 입력은 기본적으로 인라인 블록입니다.

BFC(블록 서식 컨텍스트)란 무엇인가요? 특수 영역과 동일합니다.

요소가 BFC가 되기 위한 조건을 충족하면 요소는 격리된 독립 컨테이너가 되며 요소의 내부 요소는 상위 요소의 테두리를 따라 수직으로 배열되며 서로의 외부 요소에 영향을 주지 않습니다.

BFC 발동 조건은 다음과 같습니다.

1. 부동 요소, 없음 이외의 부동 값

2. 절대 위치 요소, 위치(절대, 고정)

3 표시는 다음 값 중 하나입니다. 인라인 블록, 테이블 셀, 테이블 캡션. //블록레벨박스가 아닌 블록컨테이너입니다

4. 보이는 것 이외의 값 오버플로(숨김, 자동, 스크롤)

위 4가지 조건 중 하나라도 만족하면 블록레벨 포맷팅 그 안에 콘텐츠가 위치한 환경은 블록 수준 포맷팅 컨텍스트의 환경입니다.

CSS3에서는 BFC를 Flow Root라고 하며 다음과 같은 몇 가지 트리거 조건이 추가됩니다.

1 디스플레이의 테이블 캡션 값

2 실제로 고정은 절대값의 하위 클래스입니다. , 따라서 CSS2.1에서 이 값을 사용하면 BFC도 트리거되지만 이는 CSS3에서 더 명확해집니다.

요소는 hasLayout을 트리거하기 위해 IE 특정 CSS 속성인 Zoom: 1을 설정합니다. 확대/축소는 요소의 확대/축소 비율을 설정하거나 검색하는 데 사용됩니다. "1" 값은 요소의 실제 크기를 사용함을 의미합니다. : 1은 hasLayout을 트리거할 수 있지만 그렇지 않습니다. 요소에 다른 효과를 적용하는 것이 상대적으로 더 편리합니다. 이것이 IE에서의 상황입니다

BFC(블록 수준 서식 지정 컨텍스트)의 역할:

(1) BFC는 여백이 접히는 것을 방지합니다

접는다는 것은 여백이 겹치는 것을 의미한다는 것을 이해합니다. 아니 네 것이 내 것이고 내 것이 네 것인 것처럼 구별이 매우 분명할 것이다.

여백 축소 규칙: 두 블록 수준 요소가 인접하고 동일한 블록 수준 서식 컨텍스트에 있는 경우에만 두 요소 사이의 수직 여백이 겹칩니다. 즉, 두 개의 블록 수준 요소가 인접하더라도 동일한 블록 수준 서식 지정 컨텍스트에 있지 않으면 여백이 축소되지 않습니다. 따라서 마진이 붕괴되는 것을 방지하면 단순히 새로운 BFC가 생성됩니다.

그러나 인접한 두 요소의 경우 쉘을 추가할 필요가 없지만 중첩된 요소에는 상위 요소를 BFC로 설정하면 됩니다. 이런 방식으로 하위 요소의 여백은 상위 요소의 여백과 함께 축소되지 않습니다.

(2) BFC는 부동 요소를 포함할 수 있습니다

이는 BFC의 하위 요소가 포함 블록을 초과하지 않는 반면 절대 위치가 있는 요소는 포함 블록의 경계를 초과할 수 있음을 의미합니다

(3) BFC는 요소가 부동 요소로 덮이는 것을 방지할 수 있습니다.

이는 각 요소의 여백 상자 왼쪽을 기반으로 하며 포함 블록 테두리 상자의 왼쪽을 터치합니다(왼쪽에서 오른쪽 형식의 경우, 그렇지 않으면 반대). 이는 float가 있는 경우에도 마찬가지입니다. 이 원리가 실현됩니다.