Home > Developer > Web Develop
The previous section provides an overview of the entire layout model, which first discusses several properties of the layout model.
Z-index Property
This property is the cascade order in which objects are retrieved or set, and the default value is auto, which follows the positioning of its parent object.
The higher the value of the property, the larger the top, as the property of the two objects is the same value, then the first write will be overwritten according to the order of the document flow, and the value of the object's position property must be defined as Relative,absolute or fixed, which will take effect.
Top,right,bottom,left
These four properties all represent the relative offset of the object, the default is auto, and you also need to define the value of the Position property as Relative,absolute or fixed.
Dispaly
Lists the common values for several display properties.
None: Hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden
Inline: Specifies that the object is an inline element.
Block: Specifies that the object is a block element.
Inline-block: Specifies that the object is an inline block element.
Box: Displays the object as a flexible box model.
Inline-box: Displays objects as inline block-level elastic box models.
Float
The value of this property is None,left,right. When the value is not none causes the object to float, the object will be treated as a block object, that is, the display value is treated as blocks.
Clear
None: Allow floating objects on both sides
Both: Floating objects are not allowed
Left: does not allow floating objects
Right: Do not allow floating objects
The floating property that ignores the direction of the property value is formatted as a standard document stream.
Visibility
The default value is visible, and the setting object is visible. When the value is hidden, the object is set to hidden, and the collapse property hides the table's rows and columns.
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "Utf-8" /><title>VISIBILITY_CSS Reference manual _web front-end Development Reference manual series</title><Metaname= "Author"content= "Joy Du (Rain fog), [email protected]" /><Metaname= "Copyright"content= "Www.doyoe.com" /><style>. Test{Visibility:Hidden;}</style></Head><Body> <Divstyle= "background: #ccc; width:100px;height:100px"></Div> <Divclass= "Test">I'm not going to show up on the screen</Div><Divstyle= "background: #ccc; width:100px;height:100px"></Div></Body></HTML>
, the hidden part still retains the physical space .
Clip
Rect (<number>|auto <number>|auto <number>|auto <number>|auto): Supplied from upper-right-bottom-left to the upper-left corner of the object (0,0) Coordinates are calculated with four offset values, any of which can be replaced with auto, that is, this edge is not clipped. For example: Clip:rect (0 auto 20px 20px), the top is cut from 0 pixels, the right is not cut, the bottom is cut from 20 pixels, the left starts from 20 pixels, and the cut is transparent. Note: This property must have the value of position set to absolute or fixed.
Overflow
Visible: Do not cut content.
Hidden: The content that exceeds the size of the object is clipped and no scroll bars appear.
Scroll: Crops the content beyond the object's dimensions and displays the excess content as a scroll bar.
Auto: Cuts the content and adds scroll bars when needed, which is the default value for the body object and textarea.
There are also two properties Overflow-x and overflow-y that are equivalent to setting the overflow property on the X and Y axes, respectively.
Analysis of CSS Layout Model 2
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
