「CSS Visual Formatting Model」相關筆記


What happens to CSS when we load up a webpage

Udemy 的 Advanced CSS and Sass 在講解網頁載入 CSS 時提到關鍵字「visual formatting model」,此篇為閱讀相關文件後針對 visual formatting model 整理的筆記



結論:visual formatting model 決定一個元素會如何呈現在畫面上


Box dimensions

Box type

Positioning schemes

CSS 2.1 有三種 positioning schemes:

  1. Normal flow
  1. Floats
  1. Absolute positioning
Normal flow
position property

Relationships between display, position, and float

  1. If display: none;, then position and float do not apply. In this case, the element generates no box.
  2. Otherwise, if position has the value absolute or fixed, the box is absolutely positioned, the computed value of float is none
  3. Otherwise, if float has a value other than none, the box is floated.