20180104 CSS Basic Visual Formatting (block level element)

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.


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.


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


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


this property handle the situation when heights that don’t match the element’s content height.

Height: auto

difference between border-top or border-bottom setting

Vertical Margin Collapse