CSS attributes:
3. Layout attributes:
In the previous HTML, the positions of elements can only be arranged in sequence. In CSS, you can locate elements more accurately. Netscape once proposed Layer tag, which is good for precise layout, but not recognized by W3C. W3C proposed a function similar to Layer tag in CSS.
Position attribute:
The position attribute is used to determine the position type of an element. For details, refer to the attribute:
Attribute name: 'position'
Attribute value: absolute | relative | static
Initial value: static
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
The attribute values are:
Absolute: the absolute position on the screen.
Relative: relative position on the screen.
Static: inherent position.
Direction attributes:
The direction attribute determines the arrangement direction of the BOX. For details, refer to the attributes:
Property Name: 'direction'
Attribute value: ltr | rtl
Initial value: ltr
Target objects: all elements
Inherit?: yes
Percentage remarks: Forbidden
Float and clear attributes:
You can select a float location for an image in HTML. Currently, you can select a float location for a BOX object through CSS. Change the float attribute of the BOX. The BOX will float the left or right of other elements:
Property Name: 'float'
Attribute value: left | right | none
Initial value: none
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
For example:
<STYLE type = "text/css">
IMG {float: left}
BODY, P, IMG {margin: 2em}
</STYLE>
<BODY>
<P>
Some sample text that has no other...
</BODY>
On the contrary, the clear attribute is used to prevent elements from floating on the left or right of the BOX:
Property Name: 'clear'
Attribute value: left | right | both | none
Initial value: none
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
Absolute position attribute:
The absolute position attribute has four attributes: top, right, bottom, and left. The attribute value is the length unit or percentage:
Attribute name: 'top', 'right', 'bottom ', and 'left'
Attribute value: <length >|< percentage> | auto
Initial value: none
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
With the preceding attributes, you can precisely define the position of an element, for example:
<P style = "position: relative; margin-right: 10px; left: 10px;">
1st 2 3 pages
