집 > 기사 > 웹 프론트엔드 > 블록 수준 서식 컨텍스트란 무엇입니까? 블록 수준 서식 컨텍스트를 생성하는 역할(코드 첨부)

블록 수준 서식 컨텍스트란 무엇입니까? 블록 수준 서식 컨텍스트를 생성하는 역할(코드 첨부)

不言원래의: 2018-08-06 09:55:182536검색

(블록 서식 컨텍스트)는 말 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. Block-level Box만이 참여하는 독립적인 렌더링 영역으로 내부 Block-level Box의 배치 방식을 규정하며 이 영역 외부와는 아무런 관련이 없습니다. 그렇다면 블록 수준 서식 컨텍스트를 만드는 방법과 서식 컨텍스트의 역할은 무엇입니까? 다음 기사에서는 블록 수준 서식 지정 컨텍스트에 대해 공유합니다.

우리가 자주 이야기하는 문서 흐름은 실제로 위치 지정 흐름, 부동 흐름, 일반 흐름의 세 가지 유형으로 나뉩니다. 일반적인 흐름은 실제로 BFC의 FC를 나타냅니다.
FC는 서식 컨텍스트의 약어로, 문자 그대로 서식 컨텍스트로 번역됩니다. 페이지의 렌더링 영역입니다. 여기에는 하위 요소가 배치되는 방식과 다른 요소와의 관계 및 역할을 결정하는 일련의 렌더링 규칙이 있습니다. .

평범한 설명:

BFC는 단순히 특정 요소의 CSS 속성으로 이해될 수 있지만 이 속성은 개발자가 명시적으로 수정할 수 없습니다. 이 속성이 있는 요소는 내부에 부정적인 영향을 미칩니다. 요소와 외부 요소는 BFC라는 몇 가지 특성을 나타냅니다.

BFC의 트리거 조건은 블록 수준 서식 컨텍스트를 생성하기 위한 조건입니다.

==다음 조건 중 하나가 충족되면 BFC가 트리거될 수 있습니다==

[1] 루트 요소, 즉 는 HTML 요소입니다

[2 ]float 값은 none이 아닙니다

【3】overflow 값은 표시되지 않습니다

【4】display 값은 inline-block, table-cell, table-caption입니다.

【5】위치 값은 절대 또는 고정입니다.

서식 지정 컨텍스트(BFC) 생성 규칙:

1 내부 상자는 수직 방향으로 차례로 배치됩니다.

2. 상자의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 두 인접한 상자의 여백은 겹칩니다.

3. 각 요소의 여백 상자 왼쪽은 포함하는 블록 테두리 상자의 왼쪽과 접촉합니다(왼쪽에서 오른쪽으로 서식 지정하는 경우, 그렇지 않은 경우). 반대) . 이는 float가 있는 경우에도 마찬가지입니다.

4. BFC 영역은 플로트 박스와 겹치지 않습니다.

5.BFC는 페이지에서 분리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다. 그리고 그 반대도 마찬가지입니다.

6. BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.

BFC 레이아웃 규칙 1: 내부 상자는 수직 방향으로 차례로 배치됩니다.

우리가 흔히 말하는 상자는 여백(Margin), 테두리(Border), 패딩(Padding), 내용(Content)으로 구성됩니다. 실제로 각 유형의 4개 변은 항상 내용 상자, 패딩 상자, 테두리 상자 및 여백 유형 상자로 정의됩니다. 여백 상자는 블록 상자와 포함 블록의 인접한 블록 상자 사이의 수직 간격을 결정합니다.

BFC 레이아웃 규칙 2: 상자의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 두 개의 인접한 상자의 여백은 겹칩니다.

블록 상자와 포함 블록의 인접한 블록 상자 사이의 수직 간격을 결정하는 것은 여백 상자입니다.

BFC 레이아웃 규칙 3: 각 요소의 여백 상자 왼쪽은 포함 블록 테두리의 왼쪽에 닿습니다. 상자(왼쪽에서 오른쪽으로 형식 지정, 그렇지 않으면 그 반대로). 이는 float가 있는 경우에도 마찬가지입니다.

<div class="parent">
    <div class="child"></div>    //给这两个子div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内。
    <div class="child"></div>
</div>

분석: 두 하위 ps에 부동소수점을 추가합니다. 부동소수점의 결과로 부동소수점이 지워지지 않으면 상위 p는 다음 두 ps를 래핑하지 않지만 여전히 상위 p의 범위 내에 있게 됩니다. 왼쪽 플로트는 자식 p에 속합니다. 왼쪽은 부모 p의 경계 상자 왼쪽에 닿고, 오른쪽 부동은 자식 p가 부모 p의 경계 상자 오른쪽에 닿는 것을 의미합니다. 거리를 늘리도록 설정하면 이 규칙은 항상 동일합니다.

BFC 레이아웃 규칙 4: BFC 영역은 플로트 상자와 겹치지 않습니다:

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {            
 width: 100px;            
 height: 150px;            
 float: left;            
 background: #f66;
        }
  .main {            
  height: 200px;            
  overflow: hidden;//触发main盒子的BFC            
  background: #fcc;
        }
  .text{            
  width: 500px;
    }

위의 옆 상자에는 메인 상자의 내용을 덮는 부동 속성이 있으며, 메인 상자는 옆의 플로트를 지우지 않습니다. 상자. 자체 BFC를 실행하는 한 가지 작업만 수행하며, 그 다음에는 더 이상 옆 상자에 포함되지 않습니다. 따라서 BFC 영역은 플로트 상자와 겹치지 않습니다.

BFC의 기능은 무엇인가요?

1. 적응형 2열 레이아웃

2. 플로팅 요소를 포함할 수 있음 - 내부 플로트 지우기

4. 다른 BFC로 여백이 겹치는 것을 방지할 수 있습니다

BFC 기능 1: 적응형 2열 레이아웃

여전히 위 코드입니다. 이때 BFC 영역은 float 상자와 겹치지 않으므로 이를 기반으로 합니다. 포함 블록(부모 p)의 너비와 옆 너비, 적응형 너비.

BFC와 Layout

IE는 이상한 브라우저로서 당연히 BFC 표준을 단계별로 지원하지 못하므로 IE에는 Layout이 있습니다. 레이아웃과 BFC 기본적으로 동일합니다. IE 호환성을 처리하기 위해 BFC를 트리거해야 하는 경우 트리거 조건에서 CSS 속성을 사용하여 BFC를 트리거하는 것 외에도 IE를 타겟으로 해야 합니다. 브라우저는 Zoom: 1을 사용하여 IE 브라우저의 레이아웃을 트리거합니다.

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC 함수 3: 플로팅 요소를 포함할 수 있음 - 내부 플로트 지우기

오버플로 추가: 부모 pparent에 숨겨짐

플로팅 원칙 지우기: 다음 자식 ps가 포함되도록 부모 p의 BFC 속성을 트리거합니다. 부모 p의 동일한 BFC 영역 내에서 이번에 플로트가 성공적으로 클리어되었습니다.

플로트를 클리어하는 목적을 달성하기 위해 동일한 방향으로 플로트를 클리어할 수도 있습니다. 플로트를 클리어하는 원리는 두 p가 모두 가능하다는 것입니다. 동일한 부동 BFC 영역에 위치합니다

BFC 기능 4: 마진 겹침 방지:

두 개의 인접한 블록 수준 하위 요소가 서로 다른 BFC에 속할 경우 마진 겹침을 방지할 수 있습니다.

작동 방법: 둘 중 하나에 p를 감쌉니다. 이 p의 BFC는 두 p의 여백이 겹치는 것을 방지할 수 있습니다

<div class="aside"></div><div class="text">
    <div class="main"></div></div><!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性            
            width: 100px;            
            height: 150px;            
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性            
            height: 200px;            
            background: #fcc;
        }
         .text{            
         /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/            
         overflow: hidden;//此时已经触发了BFC属性。
        }

블록 수준 서식 컨텍스트란 무엇입니까? 블록 수준 서식 컨텍스트를 생성하는 역할(코드 첨부)

서식 지정 컨텍스트(BFC) 생성 규칙:

관련 기사