Css float box model position

This time I will bring you the box model of Css floatposition. What are the notes of using the box model position of Css float? Here is a practical case. Let’s take a look. .

Attributes:

float Float

The floating content is wrapped in p, and the width and height are set to p

　clear Clear float.

box-sizing

　Box model in standard mode content-box: (Default attribute)

Padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the set width value, border, and padding, that is (Element width = width + border + padding)

Box model in weird mode border-box:

padding and border are included within the defined width and height. The actual width of the object is equal to the set width value. Even if border and padding are defined, the actual width of the object will not be changed, that is (Element width = width)

Other properties:

　line-height Line height, used within one line.

Overflow: hidden The excess part is hidden.

Display: block inline inline-block (This element will be replaced by block element, row element, inline block element)

z-index: cascading order. The larger numbers are at the top

Other knowledge points:

Compatibility: Set the width and height of the outermost label, and set the percentage inside.

Box model: from inside to outside, it is content (html), padding, border, and margin.

Positioning:

position:

fix Absolute positioning (relative window positioning)

relative relative positioning has its own position for fine-tuning (occupies the position before fine-tuning)

absolute absolute positioning (The highest position relative to the nearest parent tag with position is body)

<style>#a{
    width:400px;
    height:200px;
    border:1px solid red;
    position:relative;
    }
    #b{
        width:100px;
        height:50px;
        border:1px solid green;
        position:absolute;
        bottom:0;
        right:0;
        }
    #c{
        width:100px;
        height:50px;
        background:green;
        position:relative;
        top:280px;
        left:210px;
        z-index:1;
        }#z{
    width:400px;
    height:200px;
    border:1px solid red;
    margin-top:5px;
    }
    #x{
        width:100px;
        height:50px;
        background:red;
        position:absolute;
        top:280px;
        left:140px;
        }
    #y{
        width:100px;
        height:50px;
        border:1px solid green;
        position:relative;
        top:110px;
        left:430px;
        }</style><!--a边框--><p>
    a    </p><p>b</p>
    <p>c</p><!--z边框--><p>
    z    </p><p>x</p>
    <p>y</p>

Collapse and position

Achieve effect

    

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Recommended reading:

Using flex layout

##What are the specifications for front-end single coding

There are several ways to clear the impact of floating on the page

The above is the detailed content of Css float box model position. For more information, please follow other related articles on the PHP Chinese website!