CSS 레이아웃의 서식 지정 컨텍스트(FC) 유형은 무엇입니까? 서식 지정 컨텍스트(FC) 유형 소개

포맷컨텍스트(FC)란 무엇인가요? 서식 지정 컨텍스트(Formatting Context)는 하위 요소의 위치는 물론 하위 요소의 상호 작용 및 다른 요소와의 상호 작용을 결정하는 일련의 렌더링 규칙이 있는 페이지의 렌더링 영역을 나타냅니다. CSS 레이아웃에서? 다음 문서에서는 여러 유형의 서식 지정 컨텍스트를 소개합니다.

BFC(블록 수준 서식 컨텍스트):

BFC란 무엇인가요? 블록 수준 서식 컨텍스트인 블록 서식 컨텍스트는 독립적인 블록 수준 렌더링 영역입니다. 이 영역에는 블록 수준 상자의 레이아웃을 제한하는 일련의 렌더링 규칙이 있으며 영역 외부와는 아무 관련이 없습니다.

BFC의 제약 규칙

1 내부 BOX는 세로 방향으로 차례대로 배치됩니다. ;

2. 수직 방향의 거리는 마진으로 결정됩니다. (완전한 설명은 다음과 같습니다. 동일한 BFC에 속하는 두 개의 인접한 BOX의 여백은 방향에 관계없이 겹칩니다.)

3 각 요소의 왼쪽 여백은 의 왼쪽 여백과 동일합니다. 플로팅된 요소의 경우에도 경계는 왼쪽에서 오른쪽으로 닿습니다. (이는 BFC의 하위 요소가 포함 블록을 초과하지 않으며 절대 위치가 포함된 요소가 포함 블록의 경계를 초과할 수 있음을 보여줍니다.) BFC의 영역은 그렇지 않습니다. float 요소와 겹칩니다. Areaoverlap

5. BFC의 높이를 계산할 때 부동 하위 요소도 계산에 참여합니다.

6. 페이지의 하위 요소는 외부 요소에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다.

플로팅으로 인한 높이 붕괴 방지#🎜🎜 #

BFC 생성 방법

• float의 값 code>는 none이 아닙니다.#🎜 🎜#

margin发生重叠

• 防止发生因浮动导致的高度塌陷

怎么生成 BFC

• float的值不为none；

• overflow的值不为visible；

• display的值为inline-block table-cell table-caption；

• position的值为absolute或fixed；

display：table也认为可以生成BFC？其实是在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

行内格式化上下文（IFC）：

什么是IFC？IFC(Inline Formatting Contexts)直译为"行内格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)

IFC有的特性

1、IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。

2、IIFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

IFC的应用

1. 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

2. 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

网格布局格式化上下文（GFC）

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GFC将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了GFC

overflow 값이 표시되지 않습니다. ;

#🎜🎜 #display 값은 inline-block table-cell table-caption; position의 값은 absolute 또는 입니다. 수정됨;

display: 테이블에서도 BFC가 생성될 수 있다고 생각하나요? 실제로 Table은 기본적으로 익명 테이블 셀을 생성하며 BFC를 생성하는 것은 이 익명 테이블 셀입니다.

#🎜🎜##🎜🎜##🎜🎜#인라인 서식 컨텍스트(IFC): #🎜🎜##🎜🎜##🎜🎜##🎜🎜#IFC란 무엇인가요? IFC(인라인 서식 컨텍스트)는 문자 그대로 "인라인 서식 컨텍스트"로 번역됩니다. IFC의 라인 상자(와이어 프레임) 높이는 포함된 인라인 요소의 실제 높이에서 계산됩니다(세로 패딩/여백의 영향을 받지 않음)# 🎜🎜 ##🎜🎜##🎜🎜#IFC의 특징#🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#1 IFC의 라인 박스는 일반적으로 왼쪽과 전체 IFC에 가깝습니다. 그러나 float 요소에 의해 방해를 받습니다. 플로트 요소는 IFC와 라인 상자 사이에 위치하여 라인 상자의 너비를 줄입니다. #🎜🎜##🎜🎜#2. 블록 수준 요소가 삽입되면(예: p에 div 삽입) div와 별도로 두 개의 익명 블록이 생성됩니다. 즉, 두 개의 IFC, 각 IFC는 div와 함께 수직으로 배열된 블록 수준 요소로 나타납니다. #🎜🎜##🎜🎜##🎜🎜#IFC 적용#🎜🎜##🎜🎜#

#🎜🎜##🎜🎜#가로 중심 맞추기: 블록이 환경에서 수평으로 중앙에 배치할 때 inline-block으로 설정하면 외부 레이어에 IFC가 생성되고, text-align을 사용하면 이를 만들 수 있습니다. 수평. #🎜🎜##🎜🎜##🎜🎜#세로 중심 맞추기: IFC를 생성하고 요소 중 하나를 사용하여 상위 요소의 높이를 확장한 다음 를 설정합니다. >vertical-align :middle, 다른 인라인 요소는 이 상위 요소 아래 수직 중앙에 배치될 수 있습니다. #🎜🎜#

#🎜🎜##🎜🎜##🎜🎜#Grid Layout Formatting Context(GFC) #🎜🎜##🎜🎜##🎜🎜##🎜🎜# GFC(GridLayout Formatting Contexts)는 문자 그대로 "그리드 레이아웃 서식 지정 컨텍스트"로 번역됩니다. 요소에 대해 display 값이 grid로 설정되면 이 요소는 그리드 정의 행 (그리드 정의 행)과 그리드 컨테이너 (그리드 컨테이너) 열 (그리드)에 그리드 정의를 정의할 수 있습니다. 정의 열) 속성은 각각 그리드 행 (grid row)과 그리드 항목 (grid item) (grid columns)의 그리드 열을 정의합니다. code>는 각 그리드 항목 <code>(그리드 항목)의 위치와 공간을 정의합니다. #🎜🎜##🎜🎜#GFC는 기존 레이아웃 모드를 1차원 레이아웃에서 2차원 레이아웃으로 변경합니다. 간단히 말해서 GFC를 사용하면 레이아웃이 더 이상 단일 크기로 제한되지 않습니다. 이때 9제곱 그리드 및 퍼즐과 같은 레이아웃 효과를 얻는 것은 매우 쉽습니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Adaptive Formatting Contexts(FFC): #🎜🎜##🎜🎜##🎜🎜##🎜🎜#FFC(Flex Formatting Contexts)는 문자 그대로 " "적응형 서식 컨텍스트", 표시 값이 flex 또는 inline-flex인 요소는 적응형 컨테이너(Flex 컨테이너)를 생성합니다. #🎜🎜#

Flex Box는 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다. 요소의 표시 속성을 flex 또는 inline-flex로 설정하여 flex 컨테이너를 얻을 수 있습니다. flex로 설정된 컨테이너는 블록 수준 요소로 렌더링되고, inline-flex로 설정된 컨테이너는 인라인 요소로 렌더링됩니다.

Flex 컨테이너의 각 하위 요소는 Flex 항목입니다. 플렉스 아이템은 얼마든지 있을 수 있습니다. Flex 컨테이너 외부와 Flex 프로젝트 내의 모든 요소는 영향을 받지 않습니다. 간단히 말해서 Flexbox는 Flex 컨테이너 내에서 Flex 항목을 배치하는 방법을 정의합니다.

FFC(적응형 서식 컨텍스트)와 BFC(블록 수준 서식 컨텍스트)의 차이점:

FFC는 BFC와 다소 유사하지만 여전히 다음과 같은 차이점이 있습니다.

1. Flexbox는 의사 요소 ::first-line 및 ::first-letter

2를 지원하지 않습니다. 효과

3. float 및clear 속성은 Flexbox의 하위 요소에 영향을 주지 않으며 하위 요소가 문서 흐름에서 벗어나도록 하지 않습니다(그러나 Flexbox에는 영향을 미칩니다!)# 🎜🎜#

4. 다중 열 레이아웃(열-*)도 Flexbox에서 유효하지 않습니다. 즉, 다중 열 레이아웃을 사용하여 Flexbox

#🎜 아래에 있는 하위 요소를 정렬할 수 없습니다. 🎜#5. Flexbox에서 하위 요소는 상위 컨테이너의 너비를 상속하지 않습니다. /css_WEB-ITnose

CSS > -ITnose

#🎜🎜 #블록 서식 지정 컨텍스트, 부동 및 절대 위치 지정 작업 방법에 대한 자세한 설명_html/css_WEB-ITnose

#🎜🎜 #

위 내용은 CSS 레이아웃의 서식 지정 컨텍스트(FC) 유형은 무엇입니까? 서식 지정 컨텍스트(FC) 유형 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!