Heim > Artikel > Web-Frontend > Ausführliche Erläuterung von Beispielen verschiedener Tipps in CSS

Ausführliche Erläuterung von Beispielen verschiedener Tipps in CSS

黄舟Original: 2017-08-03 15:43:051422Durchsuche

1. Wenn die margin-top, margin-bottom, padding-top und padding-bottom des -Elements Prozentsätze als Einheit verwenden, sind sie relativ auf die Breite des übergeordneten Elements und nicht auf die Höhe, wie wir es uns vorstellen; 🎜>

Die Parameter der Unterbox lauten wie folgt:

<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>

2. Elemente, die Positionierungsattribute enthalten, ihre obere, wenn die untere Einheit ein Prozentsatz ist, ist der Prozentsatz die Höhe relativ zum übergeordneten Element. links und rechts beziehen sich auf die Breite des übergeordneten Elements

3 . Die Rahmenbreite kann nicht als Prozentsatz ausgedrückt werden

4.width:100%

<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>

4.1 Wenn im übergeordneten Container ein absolut positioniertes untergeordnetes Element vorhanden ist, wird das untergeordnete Element festgelegt bis

width:100% Es bezieht sich tatsächlich auf die Breite von Polsterung+Inhalt relativ zum übergeordneten Container.

r wie gezeigt:

4.2

<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>

als Kind Element Wenn es sich um ein nicht absolut positioniertes Element handelt (es kann relativ positioniert werden) oder wenn

nicht positioniert ist, bezieht sich width:100% auf den Inhalt des untergeordneten Elements, der der Inhaltsbreite des übergeordneten Elements entspricht 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;
}

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen verschiedener Tipps in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So lernen Sie DIV+CSS und lernen den WegNächster Artikel：So lernen Sie DIV+CSS und lernen den Weg

In Verbindung stehende Artikel

Mehr sehen