A brief analysis of css layout model 2

The previous section gave an overview of the entire layout model. This section will first talk about several attributes of the layout model.

　z-index attribute

This property retrieves or sets the stacking order of objects. The default value is auto, following the positioning of its parent object.

For merged objects, the larger the value of this attribute, the higher it will be stacked on top. If the attribute values ​​of two objects are the same, the one written first will be overwritten according to the order of the document flow. The object must be defined. This value will take effect only if the value of the position attribute is relative, absolute or fixed.

　top,right,bottom,left

These four attributes all represent 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 commonly used values ​​​​of the display attribute.

none: hidden object. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for the hidden object

inline: Specifies the object as an inline element.

block: Specify the object as a block element.

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

box: Display the object as a flexible box model.

inline-box: Display the object as an inline block-level flexbox model.

　float

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

　clear

none: Allow floating objects on both sides

both: floating objects are not allowed

left: No floating objects are allowed on the left

right: No floating objects are allowed on the right

Ignore the floating attribute in the attribute value direction and treat it as a standard document flow for typesetting.

　visibility

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

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="zh-cn"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>visibility_CSS参考手册_web前端开发参考手册系列<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Joy Du(飘零雾雨), dooyoe@gmail.com"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="copyright"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="www.doyoe.com"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
.test</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">visibility</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background:#ccc;width:100px;height:100px"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test"</span><span style="color: #0000ff;">></span>我不会出现在屏幕上<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background:#ccc;width:100px;height:100px"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
            

As shown in the figure, the hidden part still retains physical space .

　clip

rect(|auto |auto |auto |auto): Provides the upper left corner of the object in the order of top-right-bottom-left (0, 0) Four offset values ​​for coordinate calculation, any of which can be replaced with auto, that is, this edge will not be cut. For example: clip:rect(0 auto 20px 20px); The upper side will be cut from 0 pixels, the right side will not be cut, the lower side will be cut from 20 pixels, and the left side will be cut from 20 pixels, and the cut part will be transparent. Note: This attribute must set the value of position to absolute or fixed.

　overflow

visible: Do not cut content.

hidden: Crop content that exceeds the object size, and no scroll bar will appear.

Scroll: Crop the content that exceeds the object size and display the excess content in the form of a scroll bar.

auto: Cut content and add scroll bars when needed. This is the default value for body objects and textarea.

In addition, there are two attributes, overflow-x and overflow-y, which are equivalent to setting the overflow attribute on the x and y axes respectively.