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가 있는 경우에도 마찬가지입니다. 이 원리가 실현됩니다.
추천 관련 기사:
CSS > 번역: CSS_html/css_WEB-ITnose
블록 수준 서식 자세한 설명 블록 형식화 컨텍스트, 부동 및 절대 위치 지정 작업 방법_html/css_WEB-ITnose
위 내용은 블록 수준 서식 컨텍스트를 만드는 방법은 무엇입니까? 블록 수준 포맷팅 컨텍스트의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례Mar 08, 2025 am 09:45 AM이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에
WordPress 블록 및 요소에 상자 그림자를 추가합니다Mar 09, 2025 pm 12:53 PMCSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.
Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Mar 07, 2025 am 11:33 AM이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.
5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교Mar 04, 2025 am 10:22 AM이 기사는 Envato Market에서 사용할 수있는 최고의 PHP 양식 빌더 스크립트를 탐색하여 기능, 유연성 및 설계를 비교합니다. 특정 옵션으로 다이빙하기 전에 PHP 양식 빌더가 무엇인지, 왜 사용하는지 이해해 봅시다. PHP 양식
첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AMSvelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.
쇼, 말하지 마십시오Mar 16, 2025 am 11:49 AM웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때
고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스Mar 10, 2025 am 11:37 AM이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Dreamweaver Mac版
시각적 웹 개발 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
