Layout (Layout) Properties:
In the previous HTML, the elements were placed in the order of the elements, and in the CSS you could locate the elements more precisely. Netscape has raised the layer tag, which is good for precise layout, but it is not recognized by the consortium, and the layer feature is presented in CSS similar to the logo.
Position properties:
The Position property is used to determine the position type of the element, as described in the attribute:
Property name: ' Position '
Attribute Value: Absolute | Relative | Static
Initial value: Static
Fit objects: all elements
Whether to inherit: no
Percent remark: prohibited
The property values are represented by:
Absolute: Absolute position on the screen.
Relative: The relative position on the screen.
Static: Intrinsic position.
Direction properties:
The Direction property determines the direction in which box is arranged, as described in the properties:
Property name: ' Direction '
Property value: ltr| Rtl
Initial value: LTR
Fit objects: all elements
Whether to inherit: Yes
Percent remark: prohibited
Float and Clear properties:
The image in HTML can choose to float, and now the box object can also choose to float by CSS. To change the Float property of box, box floats on the left or right side of other elements:
Property name: ' Float '
Property value: left| Right|none
Initial value: None
Fit objects: all elements
Whether to inherit: no
Percent remark: prohibited
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>
Conversely, using the clear property will prevent the element from floating on the left or right side of the box:
Property name: ' Clear '
Property value: left| Right|both|none
Initial value: None
Fit objects: all elements
Whether to inherit: no
Percent remark: prohibited
Absolute Position Properties:
The absolute position attribute has four properties: top, right, bottom, and left, and the property value is a length unit or a percentage:
Attribute name: ' Top ', ' right ', ' bottom ', ' left '
Property value: <length>|<percentage>|auto
Initial value: None
Fit objects: all elements
Whether to inherit: no
Percent remark: prohibited
With the above properties, the user can precisely define the location of the element, such as:
<p style= "position:relative; margin-right:10px; left:10px; " >
I used two red hyphens to serve as a change bar. They
'll "float" to the left of the "containing"
<span style= "Position:absolute; Top:auto; left:0px; color:red; " >--</SPAN>
Word.</p>
Z-index Properties:
In the CSS to allow the overlapping display of elements, so there is a problem of the display order, the Z-index attribute describes the element before and after the position, if the computer screen as an X-y plane, then the z-axis is perpendicular to the screen, z-index use integers to represent the position of the elements, the larger the value, is displayed in a relatively forward position, and CSS agrees to use negative numbers in Z-index.
Property name: ' Z-index '
Property value: auto|<integer>
Initial value: Auto
Fit objects: Elements that use the Position property
Whether to inherit: no
Percent remark: prohibited
Width Property:
The Width property of box allows the box to not depend on the amount of content it contains:
Attribute name: ' Width '
Property values: <length> | <percentage> | Auto
Initial value: Auto
Fit object: Block element
Whether to inherit: no
Percent Note: Depends on the width of the parent element
The Min-width and Max-width properties are also provided in the CSS to make box width between the minimum width and the maximum width.
Property name: ' Min-width '
Property values: <length> | <percentage>
Initial value: 0
Fit objects: All
Whether to inherit: no
Percent Note: Depends on the width of the parent element
Property name: ' Max-width '
Property values: <length> | <percentage>
Initial value: 100%
Fit objects: All
Whether to inherit: no
Percent Note: Depends on the width of the parent element
Height Property:
The same box also has the height attribute to control its height:
Property name: ' Height '
Property values: <length> | <percentage> | Auto
Initial value: Auto
Fit object: Block element
Whether to inherit: no
Percent Note: Depends on the height of the parent element
The Min-height and Max-height properties are also provided in CSS to make box height between the minimum height and the maximum height.
Property name: ' Min-height '
Property values: <length> | <percentage>
Initial value: 0
Fit objects: All
Whether to inherit: no
Percent Note: Depends on the height of the parent element
Property name: ' Max-height '
Property values: <length> | <percentage>
Initial value: 100%
Fit objects: All
Whether to inherit: no
Percent Note: Depends on the height of the parent element
Overflow properties:
When you specify the width and height of an element, you use the overflow property if the element's area is insufficient to display the entire contents:
Property name: ' Overflow '
Attribute Value: Visible | Hidden | Scroll | Auto
Initial value: Visible
Fit object: Position property of Element
Whether to inherit: no
Percent remark: prohibited
The attribute value has the following meanings:
Visible: Enlarge the area to show all content.
Hidden: Hides out-of-scope content.
Scroll: Displays a scroll bar to the right of the element.
Auto: Displays scroll bars when content is outside the element area.
Clip properties:
CSS also provides a clip property that can cut the area of an element into various shapes, but currently offers only a square one:
Property name: ' Clip '
Property values: <shape> | Auto
Initial value: Auto
Fit element: The position property of the element is set to absolute
Whether to inherit: no
Percent remark: prohibited
<shape> value is rect (top right bottom left).
Line-height and Vertical-align Properties:
The Line-height property can specify the line spacing within the element, using the length unit or percentage:
Property name: ' Line-height '
Property value: Normal | <number> | <length> | <percentage>
Initial value: Normal
Fit objects: all elements
Whether to inherit: Yes
Percent Note: Depends on the font size of the element
For example, the following example, although the presentation is different, but the result is the same:
DIV {line-height:1.2; font-size:10pt}
DIV {line-height:1.2em; font-size:10pt}
DIV {line-height:120%; font-size:10pt}
The Vertical-align property determines the display of the element in the vertical position:
Property name: ' Vertical-align '
Attribute Value: Baseline | Sub | Super | Top | Text-top | Middle | Bottom | Text-bottom | <percentage> | <length>
Initial value: Baseline
Suitable object: inline elements
Suitable for inheritance: no
Percent Note: Depends on the Line-height property of the element
The attribute value has the following meanings:
Baseline: Aligns with the baseline of the element.
Middle: Aligns with the middle of the element.
Sub: Word Sinks.
Super: Word goes up.
Text-top: Aligns the top of the text.
Text-bottom: Text is aligned at the bottom.
Top: Aligns with the highest element of the line position.
Bottom: Aligns with the lowest element of the bank.
Visibility Properties:
This property is used to control the display or concealment of elements:
Property name: ' Visibility '
Attribute value: Inherit | Visible | Hidden
Initial value: Inherit
Fit objects: all elements
Whether to inherit: if the value is inherit, the parent element property is inherited
Percent remark: prohibited
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
