Days 5~6 : Reading Box Model and Visual Formatting Model.

boxdim.png

boxmodel.md

All about box model can be explained with this image.

each four areas has there own area composed of four edges.

margin area has one diffrence. the adjoining margins of two or more boxes can combine to form a single margin. that's called collapse. the case that causes collapsing you can see click the link

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. But margin backgrounds are always transparent. And border backgrounds can be changed.

inline elements box model depends on direction of context.

visual_formating_model.md

Breaking News

I cannot read this all details due to a hackathon. So I just write down answer of question. after the end of this hackathon I'll print it and read it all details..finally post it again. because visual formatting model is most important concept in CSS.

and I found out outstanding video about CSS rendering. CSS 렌더링 - 코드스피츠 Unfortunately, that course don't provide English subtitle... but google translator can translate it. speaker told that main point of CSS specification. that's great. and it's free.

---

questions

What are containing blocks, block-level elements, and block boxes?

• containing blocks
  • In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.
• block-level elements
  • Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
• block-level boxes
  • Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme

What are positioned elements?

An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties:

Explain “normal flow” :)

there's two way in normal flow. block and inline formatting context.

• block formatting context
  • In this context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
  • non-block boxes(Floats, absolutely positioned elements, block containers), and block boxes with 'overflow' other than 'visible' establish new block formatting contexts for their contents.
• inline formatting context
  • In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
  • . Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
  • and it can overlaps context