Normal Flow

• CSS Rendering 1회차

---

CSS 2.1 Visual Formatting Model

• positioning schemes & normal flow

Visual formatting model

Position

• geometry 영역에 추상적인 위치를 결정해주는 것

• static, relative, absolute, fixed, inherit

• position이 static, relative일 경우에만 normal flow에 들어간다.

• html 모든 값은 position이 기본적으로 static이다.

Normal Flow

• block formatting context (BFC)

• inline formatting context (IFC)

• relative formatting context

  • normal flow의 일부이지만, position에서 정의하고 있음.

Sheep-Screenshot 2022-01-14 PM 11.25.39.png

BFC

• block : 부모 만큼 가로 길이를 다 차지하는 것.

  • 자식의 x 값은 항상 0, width는 부모의 width, y 값은 상위 자식(들)의 height의 합

  • 자식의 height의 합이 부모의 height

IFC

• 나의 contents 길이만큼이 가로 길이

• 다음번 요소의 x는 이전 요소(들)의 width

• inline 요소의 width의 합이 부모의 width를 넘어가면, 다음줄로 넘어간다.

• 다음줄 첫번째 요소의 x는 0. y는 윗줄의 요소들 중 가장 height가 큰 값.

예제

Sheep-Screenshot 2022-01-14 PM 11.27.11.png

• width가 500이라는 것은 fragment가 500인 것이고, 실제로는 가로 전체를 차지.

• 따라서 파란 영역은 부모의 가로 길이를 받아서 가로 전체가 채워짐.

Sheep-Screenshot 2022-01-14 PM 11.43.00.png

• 렌더링 시스템과 DOM의 구조는 무관하다.

• DOM의 포함관계와는 무관하게, 렌더링 시스템에게는 BFC, IFC로만 보이게 된다.

Sheep-Screenshot 2022-01-14 PM 11.45.45.png

• normal flow로 static하게 그린 다음, relative로 50px을 내려서 WORLD, div가 위치함.

• static과 relative가 같이 있으면, relative가 static 위로 뜨게 된다.

• static으로 geometry를 그리고, 그림만 relative하게 그리므로, relative가 geometry를 변경시키지 않는다.