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' Direction attributes: The direction attribute determines the arrangement direction of the box. For details, refer to the attributes: Property name: 'direction' 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' For example:
On the contrary, the clear attribute is used to prevent elements from floating on the left or right of the box: Property name: 'clear' Absolute position attribute: The absolute position attribute has four attributes:Top, right, bottom, and left, The property value is the length unit or percentage: Attribute name: 'top', 'right', 'bottom ', and 'left' With the preceding attributes, You can precisely define the position of an element, for example:
Z-index attributes: In CSS, the overlapping display of elements is allowed, so there is a problem of display order, the Z-index attribute describes the front and back of the element, if the computer screen as a X-Y plane, then, the Z axis is perpendicular to the screen, and the Z-Index uses an integer to indicate the front and back positions of the element. A larger value will display the front position, CSS agrees to use a negative number in Z-index. Property name: 'z-Index' Width property: Specify the width attribute of the box so that the width of the box does not depend on the content it contains: Property name: 'width' The Min-width and max-width attributes are also provided in CSS, so that the width of the box is between the minimum width and the maximum width. Property name: 'min-width' Property name: 'max-width' Height attribute: The same box also has the height attribute to control its own height: Property name: 'height' The Min-height and max-height attributes are also provided in CSS, so that the height of the box is between the Min-height and max-height. Property name: 'min-height' Property name: 'max-height' Overflow attributes: When specifying the width and height of an element, the overflow attribute is required if the area of the element is insufficient to display all content: Attribute name: 'overflow' The attribute values are as follows: Visible: Expand the area to show all content. Clip attributes: CSS also provides a clip attribute to cut the element area into various shapes, but currently only provides one square type: Property name: 'clip' <Shape> the value is rect (top right bottom left ). Line-height and vertical-align attributes: The line-height attribute specifies the row spacing inside the element. The unit of length or percentage is used: Property name: 'line-height' In the following example, although the expressions are different, the results are the same:
The vertical-align attribute determines the vertical display of elements: Property name: 'vertical-align' The attribute values are as follows: Visibility attributes: This attribute is used to control the display or hide of elements: Property name: 'visibility'
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
