Analysis of css layout model 2: Analysis of css layout

Analysis of css layout model 2: Analysis of css layout

The previous section gives an overview of the entire layout model. This section first describes the attributes of the layout model.

Z-index attributes

This attribute is used to retrieve or set the cascade order of objects. The default value is auto, which follows the positioning of its parent object.

For parallel objects, the larger the value of this attribute is, the higher the value will be stacked on the top. For example, if the values of the two objects are the same, the order of the document flow will apply, the value written first will be overwritten. The object's position attribute value must be defined as relative, absolute, or fixed to take effect.

Top, right, bottom, left

The four attributes indicate the relative offset of the object. The default value is auto. You also need to define the value of the position attribute as relative, absolute, or fixed.

Dispaly

Lists several common values of the display attribute.

None: hides an object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.

Inline: Specifies the object as an inline element.

Block: Specifies the object as a block element.

Inline-block: Specifies the object as an inline block element.

Box: displays an object as an elastic box model.

Inline-box: displays an object as an inline block-level elastic box model.

Float

The values of this attribute include none, left, and right. When the value is not none, the object will be regarded as a block object, that is, the value of display will be regarded as a block.

Clear

None: Allow floating objects on both sides

Both: Float objects are not allowed.

Left: Float objects on the left are not allowed.

Right: Float objects on the right are not allowed.

Ignore the floating attribute in the property value direction and regard it as a standard document stream for layout.

Visibility

The default value is visible, and the object is visible. When the value is hidden, the object is hidden. The collapse attribute hides the rows and columns of the table.

<! DOCTYPE html> 

The hidden part still retains the physical space.
Clip
Rect (<number> | auto ): in the order of Top-right-bottom-left, the four offset values calculated from the () coordinate in the upper left corner of the object are provided. Any value can be replaced by auto, that is, this edge is not cut. For example: clip: rect (0 auto 20px 20px); the top side is cut from 0 pixels, the right side is not cut, the bottom is cut from 20 pixels, and the left side is cut from 20 pixels, the cut part is transparent. Note: This attribute must set the position value to absolute or fixed.
Overflow
Visible: Do not cut the content.
Hidden: crops the content beyond the object size without a scroll bar.
Scroll: crops the content that exceeds the object size and displays the content that exceeds the size as a scroll bar.
Auto: Cut the content and add a scroll bar as needed. This is the default value for the body object and textarea.
In addition, the overflow-x and overflow-y attributes are set on the x and y axes respectively.