Reference:
Basic Visual Formatting in CSS: Layout Fundamentals in CSS
Basic Boxes
every element generates one or more rectangular boxes, called element boxes.
Future versions of the specification may allow for nonrectangular boxes, and indeed there are proposals to change this, but for now everything is rectangular.
觀念調整：
以前以為 element 就是 box, 但是這是兩個不同的東西
element 產生 boxes
Each element box has a content area at its center. This content area is surrounded by optional amounts of padding, borders, outlines, and margins.
r
Normal flow
the only way for an element to leave the normal flow
is to be floated, positioned, or made into a flexible box or grid layout element.
Root element
This is the element at the top of the document tree. In HTML documents, this is the element html.
Block box
p div head
後面接換行符號
element display: block
Containing Block
Every element’s box is laid out with respect to its containing block; in a very real way, the containing block is the “layout context” for a box.
display
you are changing the display role of elements—not changing their inherent nature.
An inline element can be a descendant of a block element, but the reverse is not true.
探討不同的 box
Block Boxes
尺寸計算方式：
box-sizing
applies to “all elements that accept width or height values.”
Horizontal Formatting
there is a simple rule that says that the sum of the horizontal components of a block box in the normal flow always equals the width of the containing block.
Replaced Element
overflow
this property handle the situation when heights that don’t match the element’s content height.