|
|||||||||||
|
This specifies the type of box that an element will produce. Possible values are block (e.g., P - initial value), inline (e.g., B), list-item (block element with marker box; e.g., LI), and none (ignore element entirely and all its descendants).
An element that has display: block generates a principal block box. This defines the containing block for descendant element. Note that content can go outside the principal block box, as do list item markers.
Display applies to all elements and is not inherited.
IE 3 does not support display. IE 4 on the PC does not support display except for none. IE 5 supports block, inline and none. Opera supports block, none and inline. IE 4 on the Mac supports none. Netscape only supports none usably.
Height is principally used to specify the height of block and replaced elements.
Heights can be specified as a length, % (of parent's height, but treated as auto if the parent did not have an explicitly set height), or as auto (which is the initial value).
Height applies to all elements except non-replaced inline, table columns and column groups. Height is not inherited and can't be negative.
IE 3 does not support height.
Widths can be specified as a length, % (relative to the width of the containing block), or as auto (which is the initial value). It does not apply to non-replaced inline elements (whose width is the width of their content, subject to the width of the containg block breaking them into several lines), to table rows or row groups. Width cannot be negative.
Width is not inherited.
IE 3 does not support width.
There are 2 positioning schemes in CSS 1. Firstly, normal flow, which includes block elements, inline elements, list-items, etc.; and secondly, floats.
Floating boxes are first positioned according to normal flow, and then moved as far to the left (or right) as possible.
In normal flow, block boxes are simply stacked on top of each other at a separation defined by the margin of the elements. In addition, every box's left margin touches the left content edge of the containing block. Inline boxes are laid out horizontally, from the top of the containing block, according to horizontal padding, border and margin values, and when there is no room left horizontally, they are stacked on top of one another as line boxes.
The float property alters the normal behavior of an element. For example, it can be used to create a drop cap effect.
Possible values for the float property are left, right and none, where none is the initial value. The effect of setting float is similar to making the element part of the specified margin - float: left will cause it to be part of the left margin. Subsequent non-floated block elements to the float treat it as though it wasn't there, and thus overlapping results. However, inline content (such as text inside the float) will wrap around the float.
Floated block elements do, however, take the position of floats into account. E.g.:
<div style="height: 100px; width: 100px; border: solid; float; left">
</div>
<div style="height: 100px; width: 100px; border: solid; float; left">
</div>
That would be rendered thus:
+---+ +---+
| | | |
| | | |
+---+ +---+
Here's an example showing how inline content flows around floats:
<P>
<SPAN style="float: left; font-size: 72px; line-height: 72px; width:
50px">T</SPAN>he cat sat on the mat<BR> again <BR>once more. </P>
<P>
New paragraph flows round it and continues after it.
</P>
---------------he cat sat on the mat
| again
| once more
|
|
| New paragraph
flows round it
and continues after it.
Note how the top of the floating T is aligned with the top of the line, and how the next block element continues to wrap around it.
SPAN.dropcap {float: left;
font-size: 48px; width: 30px; line-height: 48px}
The above example can be used to create a drop cap.
Float applies to all elements and is not inherited.
All browsers support float buggily, and IE 3 not at all.
The clear property prevents an element from flowing round a floating element
Possible values for clear are left (preventing the element from starting (i.e., a cleared element can contain floating elements, but it will not flow round floating ones) around a left floated element), right (preventing the element from starting around a right floated element), both (preventing an element from starting around a floated element), or none (allowing floating on both sides) - the initial value.
To clear the element, the element is moved down below the float.
Clear applies only to block elements and is not inherited.
Note that clear does not prevent floating inside the element - if <P style="clear:
left">Some text<IMG style="float: left"> then the image would float
normally, but if <IMG style="float: left"><P style="clear:
left">Some text</P>, then P would start below the image - clear only relates to whether
an element can start in a given position.
IE 3 does not support clear, and all other browsers have problems with it, so test carefully.
Although width, margins and height will normally behave in an intuitive manner, it is useful to know how they work, especially since they do not always do what you expect.
To find the width and height of elements, precise rules are used. These are described below.
Width is inapplicable (it is that of the containing block), and all auto values are replaced with 0.
If an element is replaced (such as IMG), width: is replaced by the intrinsic values for the elements, and other auto values become 0.
All auto values become 0, meaning that floating non-replaced elements must have an explicit width.
Width: auto is replaced by the element's intrinsic width, and all other auto values become 0.
Generally, width + padding-left + padding-right + margin-left + margin-right + border-left-width
+ border-right-width = width of the parent.
It should be noted that border widths are only of relevance if a border style has been set.
This equality is solved by the browser.
On the root element (i.e., BODY or HTML) the width of the parent element is that of the viewport (or window).
1. If all the values are set to a value other than auto, then margin-right is adjusted to satisfy the equation.
If the equality cannot yet be solved, the rules below are used.
2. If exactly one of the values is set to auto, the value is put in for it to satisfy the equation.
3. If width: auto, then any other remaining auto values are replaced with 0, and a value is put in for width to satisfy the equality.
4. If margin-left and margin-right are both still auto, they will be set to equal values.
If the equality cannot yet be solved, the rules below are used.
2. If an element is replaced (such as IMG), width: auto is replaced by the intrinsic value for the element.
3. If margin-left and margin-right are both still auto, they will be set to equal values.
Height: auto becomes the element's intrinsic height, and all other auto values become 0.
All auto values are set to 0, and height is ignored.
Margin-top and margin-bottom: auto becomes 0. If height: auto, then if the element only has inline children, height becomes from the top of the top line box to the bottom of the bottom one. If it has block children, it is from the top border-edge of the topmost block child box (include anonymous boxes (i.e., those generated by the element itself)) to the bottom border-edge of the bottommost block child box.
<P style="margin-left: 50%; line-height: 15px">
<br>
<br>
</P>
This would result in a P element with width equal to 50% of its containing block and 45 pixels high.
<P style="margin-left: 50%; margin-right: 0; width: 100%">
</P>
Since the P element is overconstrained, margin-right is ignored and therefore it is given margin-right: -50%.
This is the end of the CSS-1 guide. I recommend now that you read the master class so that you can hone your skills to true style sheet mastery, the bug guides, so that you can make sure that your styles work, or simply the front page so you can access it all.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.