포맷컨텍스트(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的应用
水平居中:当一个块要在环境中水平居中时,设置其为inline-block
则会在外层产生IFC
,通过text-align
则可以使其水平居中。
垂直居中:创建一个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
, 다른 인라인 요소는 이 상위 요소 아래 수직 중앙에 배치될 수 있습니다. #🎜🎜#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!