{"id":4887,"date":"2020-03-03T23:23:05","date_gmt":"2020-03-03T23:23:05","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=4887"},"modified":"2022-03-22T18:56:08","modified_gmt":"2022-03-22T18:56:08","slug":"04-how-css-works","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/04-how-css-works\/","title":{"rendered":"04 How CSS Works ( w3.org)"},"content":{"rendered":"

CSS takes a source document, organized as a tree<\/span><\/dfn> of elements<\/span><\/dfn> and text nodes<\/span><\/dfn>, and renders it onto a canvas<\/a>(such as your screen, a piece of paper, or an audio stream). To do this, it generates an intermediary structure, the box tree<\/span><\/dfn>, which represents the formatting structure of the rendered document. Each box<\/span><\/dfn> in the box tree<\/a>represents its corresponding element<\/a> (or pseudo-element<\/a>) in space and\/or time on the canvas, while each text run<\/span><\/dfn> in the box tree<\/span> likewise represents the contents of its corresponding text nodes<\/a>.<\/p>\n

To create the box tree<\/a>, CSS first uses cascading and inheritance<\/a>, to assign a computed value<\/a> for each CSS property to each element<\/a> and text node<\/a> in the source tree. (See [CSS3-CASCADE]<\/a>.)<\/p>\n

Then, for each element<\/a>, CSS generates zero or more boxes<\/a> as specified by that element\u2019s display<\/a> property. Typically, an element generates a single box<\/span>, the principal box<\/a>, which represents itself and contains its contents in the box tree<\/a>. However, some display<\/span> values (e.g. display: list-item<\/span>) generate more than one box (e.g. a principal block box<\/a> and a child marker box<\/a>). And some values (such as none<\/a> or contents<\/a>) cause the element<\/span>and\/or its descendants to not generate any boxes<\/span> at all. Boxes<\/span> are often referred to by their display<\/span> type\u2014<\/wbr>e.g. a box<\/span> generated by an element with display: block<\/span> is called a \u201cblock box\u201d or just a \u201cblock\u201d.<\/p>\n

A box<\/a> is assigned the same styles as its generating element<\/a>, unless otherwise indicated. In general, inherited properties<\/a> are assigned to the principal box<\/a>, and then inherit through the box tree to any other boxes generated by the same element. Non-inherited properties default to applying to the principal box<\/span>, but when the element generates multiple boxes, are sometimes defined to apply to a different box: for example, the border<\/a> properties applied to a table element are applied to its table grid box<\/a>, not to its principal<\/span> table wrapper box<\/a>. If the value computation process alters the styles of those boxes, and the element\u2019s style is requested (such as through getComputedStyle()<\/a><\/code>), the element reflects, for each property, the value from the box to which that property was applied.<\/p>\n

Similarly, each contiguous sequence of sibling text nodes<\/a> generates a text run<\/a> containing their text contents, which is assigned the same styles as the generating text nodes<\/span>. If the sequence contains no text, however, it does not generate a text run<\/span>.<\/p>\n

In constructing the box tree, boxes generated by an element are descendants of the principal box of any ancestor elements. In the general case, the direct parent box<\/dfn> of an element\u2019s principal box<\/a> is the principal box<\/span> of its nearest ancestor element that generates a box<\/a>; however, there are some exceptions, such as for run-in<\/a>boxes, display types (like tables) that generate multiple container boxes, and intervening anonymous boxes<\/a>.<\/p>\n

An anonymous box<\/span><\/dfn> is a box that is not associated with any element. Anonymous boxes<\/a> are generated in certain circumstances to fix up the box tree<\/a> when it requires a particular nested structure that is not provided by the boxes generated from the element tree<\/a>. For example, a table cell box<\/a> requires a particular type of parent box (the table row box<\/a>), and will generate an anonymous<\/span> table row box<\/a> around itself if its parent is not a table row box<\/a>. (See [CSS2]<\/a> \u00a7 17.2.1<\/a>.) Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree<\/span>) inherit<\/a> through their box tree<\/span> parentage.<\/p>\n

In the course of layout, boxes<\/a> and text runs<\/a> can be broken into multiple fragments<\/a>. This happens, for example, when an inline box<\/a> and\/or text run<\/span> is broken across lines, or when a block box<\/a> is broken across pages or columns, in a process called fragmentation<\/a>. It can also happen due to bidi reordering of text (see Applying the Bidirectional Reorderign Algorithm<\/a> in CSS Writing Modes<\/a>) or higher-level display type<\/a> box splitting, e.g. block-in-inline splitting<\/a> (see CSS2\u00a79.2<\/a>) or column-spanner-in-block<\/a> splitting (see CSS Multi-column Layout<\/a>). A box<\/span>therefore consists of one or more box fragments<\/a>, and a text run<\/span> consists of one or more text fragments<\/span>. See [CSS3-BREAK]<\/a> for more information on fragmentation<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"

CSS takes a source document, organized as a tree of elements and text nodes, and renders it onto a canvas(such as your screen, a piece of paper, or an audio stream). To do this, it generates an intermediary structure, the … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4887"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=4887"}],"version-history":[{"count":2,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4887\/revisions"}],"predecessor-version":[{"id":4889,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4887\/revisions\/4889"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=4887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=4887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=4887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}