Home > Article > Web Front-end > Detailed explanation of examples of several tips in css

Detailed explanation of examples of several tips in css

黄舟Original: 2017-08-03 15:43:051420browse

1.When the margin-top, margin-bottom and padding-top, padding-bottom of the element use percentage as the unit, they are relative to the width of the parent element. width, rather than height as we imagine; as shown in the figure

<style type="text/css">
        .parent{
            outline: 1px solid orange;
            width: 200px;
            height: 300px;
            padding: 10px;
            margin: 10px;
        }
        .child{
            outline: 1px solid purple;
            width: 200px;
            height: 80px;
            padding-top: 10%;    　　/*20px = 父容器的width值200px * 10% */
            padding-bottom: 5%;     /*10px = 200px * 5% */
            margin-top: 20%;    　　/*40px = 200px * 20%*/
            margin-bottom: 15%;    /*30px = 200px * 15%*/
        }<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>

The sub-box parameters are as follows:

2. Elements containing positioning attributes, their top and bottom units When it is a percentage, the percentage is relative to the height of the parent element. left and right are relative to the width of the parent element.

<span style="color: #000000">.parent{
            outline: 1px solid orange;
            width: 200px;
            height: 300px;
            padding: 0px;
            margin: 0px;
            position: relative;
        }
        .child{
            outline: 1px solid purple;
            width: 200px;
            height: 80px;
            position: absolute;
            top: 5%;　　/* 15px = 300px * 5% 上边框离父盒子上边框15px的距离*/
            left: 20%;　　/*　　40px = 200px * 20% 左边框离父盒子左边框40px的距离　　<br/>　　　　　　　　　　　　　　　　　　 也就是子盒子左上角的坐标为x=15,y=40（父盒子左上角为原点）  */ 
            
        }</span>

3. Border width Cannot be expressed as a percentage

4.width:100%

4.1 When there is an absolutely positioned child element in the parent container, the child element is setwidth:100% Actually Refers to the width of padding+content relative to the parent container.

rAs shown in the figure:

<style type="text/css">
    .parent{
        outline: 1px solid orange;
        width: 200px;
        height: 300px;
        padding: 10px;
        margin: 10px;
        position: relative;
    }
    .child{
        outline: 1px solid purple;
        width: 100%;　　/* width = 220px = 父容器的padding+content*/
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

##4.2

When the child element is non-absolute When the element is positioned (it can be relative positioning), or if it is not positioned, width:100% refers to the content of the child element, which is equal to the content width of the parent element.

.parent{
    outline: 1px solid orange;
    width: 200px;
    height: 300px;
    padding: 10px;
    margin: 10px;
}
.child{
    outline: 1px solid purple;
    width: 100%;  /* width:200px = 父盒子的content*/
    height: 80px;
}

.parent{
    outline: 1px solid orange;
    width: 200px;
    height: 300px;
    padding: 10px;
    margin: 10px;
    position: relative;
}
.child{
    outline: 1px solid purple;
    width: 100%; 
    height: 80px;
    position: relative;
}

The above is the detailed content of Detailed explanation of examples of several tips in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to learn DIV+CSS and learning routeNext article：How to learn DIV+CSS and learning route

See more

Detailed explanation of examples of several tips in css

Related articles