What does 'generated box' in css mean?

Question

As the question title, what does 'generated box' in css mean? article link: http://www.sitepoint.com/web-foundations/css-box-model/

Answer 1

A "generated box" is simply a box that is associated with an element in the visual formatting structure. The word "generate" specifically refers to the act of creating a box and drawing it on screen according to the CSS properties of the element. The introduction to section 9 of the CSS2.1 spec summarizes it nicely:

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

• box dimensions and type.
• positioning scheme (normal flow, float, and absolute positioning).
• relationships between elements in the document tree.
• external information (e.g., viewport size, intrinsic dimensions of images, etc.).

Most elements tend to generate only one box, but some can generate multiple boxes or none at all depending on the situation. For example, the following generates a single block box that is 100 pixels by 100 pixels:

<div style="width: 100px; height: 100px; background-color: red"></div>

The following inline element generates two inline boxes, one for each line:

<span style="line-height: 2; background-color: yellow">Text<br>Text</span>

And the following list item generates two boxes: a marker box which contains the bullet, as well as what is called the principal box, the box in which the content resides and to which styles targeting this list item are applied (detailed explanation given here):

<ul>
  <li style="list-style-position: outside; background-color: cyan"></li>
</ul>

You can see that the background does not extend to the marker box, but this only happens because list-style-position is outside. Setting it to inside causes the marker box to be positioned together with the text, within the principal box. It remains its own self-contained entity, however.

Setting display: none causes an element to generate no box at all. The element remains in the DOM tree, and inheritance works normally, but visually it simply does not exist.