[ Pobierz całość w formacie PDF ]
block for the line boxes. If the containing block is sufficiently wide, all the inline boxes will fit into a single line box: Several emphasized words appear in this sentence, dear. If not, the inline boxes will be split up and distributed across several line boxes. The previous paragraph might be split as follows: Several emphasized words appear in this sentence, dear. 106 Line height 2.4em Several emphasized words appear here. Width of paragraph or like this: Several emphasized words appear in this sentence, dear. In the previous example, the EM box was split into two EM boxes (call them "split1" and "split2"). Margins, borders, padding, or text decorations have no visible effect after split1 or before split2. Consider the following example: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" HTML HEAD TITLEExample of inline flow on several lines/TITLE STYLE type="text/css" EM { padding: 2px; margin: 1em; border-width: medium; border-style: dashed; line-height: 2.4em; } /STYLE /HEAD BODY PSeveral EMemphasized words/EM appear here./P /BODY /HTML Depending on the width of the P, the boxes may be distributed as follows: The margin is inserted before "emphasized" and after "words". The padding is inserted before, above, and below "emphasized" and after, above, and below "words". A dashed border is rendered on three sides in each case. 9.4.3 Relative positioning Once a box has been laid out according to the normal flow [p. 105] , it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1’s offset is applied. This implies that relative positioning may cause boxes to overlap. Relatively positioned boxes keep their normal flow size, including line breaks and the space originally reserved for them. A relatively positioned box estab- lishes a new a new containing block [p. 96] for normal flow children and posi- tioned descendants. 107 A relatively positioned box is generated when the ’position’ property for an element has the value ’relative’. The offset is specified by the ’top’, ’bottom’, ’left’, and ’right’ properties. Dynamic movement of relatively positioned boxes can produce animation effects in scripting environments (see also the ’visibility’ property). Relative posi- tioning may also be used as a general form of superscripting and subscripting except that line height is not automatically adjusted to take the positioning into consideration. See the description of line height calculations [p. 141] for more information. Examples of relative positioning are provided in the section comparing normal flow, floats, and absolute positioning [p. 115] . 9.5 Floats A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the ’clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules [p. 112] governing float behavior are given in the description of the ’float’ property. A floated box must have an explicit width (assigned via the ’width’ property, or its intrinsic [p. 30] width in the case of replaced elements [p. 30] ). Any floated box becomes a block box [p. 97] that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn’t enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it. Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. Several floats may be adjacent, and this model also applies to adjacent floats in the same line. Example(s): The following rule floats all IMG boxes with class="icon" to the left (and sets the left margin to ’0’): IMG.icon { float: left; margin-left: 0; } Consider the following HTML source and style sheet: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" HTML HEAD TITLEFloat example/TITLE STYLE type="text/css" 108 B O D Y m a r g i n max (BODY margin, P margin) IMG { float: left } BODY, P, IMG { margin: 2em } /STYLE /HEAD BODY PIMG src=img.gif alt="This image will illustrate floats" Some sample text that has no other... /BODY /HTML The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float’s presence, but resume their "normal" width (that of the containing block established by the P element) after the float. This document might be formatted as: P margins IMG margins IMG Some sample text that has no other purpose than to show how floating elements are moved to the side of the parent element while honoring margins, borders, and padding. Note how adjacent vertical margins are collapsed between non-floating block-level elements. Formatting would have been exactly the same if the document had been: BODY PSome sample text IMG src=img.gif alt="This image will illustrate floats" that has no other... /BODY because the content to the left of the float is displaced by the float and reflowed down its right side. The margins of floating boxes never collapse [p. 86] with margins of adjacent boxes. Thus, in the previous example, vertical margins do not collapse [p. 86] between the P box and the floated IMG box. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When an inline box overlaps with a float, the content, background, and borders of the inline box are rendered in front of the float. When a block box overlaps, the background and borders of the block box are rendered behind the float and are only be visible where the box is trans- parent. The content of the block box is rendered in front of the float. Example(s): 109 Here is another illustration, showing what happens when a float overlaps borders of elements in the normal flow. image margin paragraph margin paragraph border paragraph padding [ Pobierz całość w formacie PDF ] |