Heim >Web-Frontend >CSS-Tutorial >CSS verwendet relative, um die Oberseite der Baidu-Homepage zu imitieren

CSS verwendet relative, um die Oberseite der Baidu-Homepage zu imitieren

小云云
小云云Original
2018-03-01 09:24:302390Durchsuche

Während ich kürzlich HTML und CSS lerne, möchte ich die Baidu-Homepage nachahmen. Ich habe festgestellt, dass sich der Leerabstand zwischen diesem Teil des Suchfelds und anderen Elementen darüber und darunter mit der Größe des Fensters ändern kann. Ich hoffe, dieser Artikel kann allen helfen.

Wirkungsumsetzung

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直伸缩</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
        }
        .content{
            min-width: 810px;
            min-height: 600px;
            height: 100%;
            border: 1px dashed green;
        }
        .wrap{
            width: 100%;
            height: 191px;
            border: 1px solid blue;
            position: relative;
            top: 38.2%;
        }
        .wrap-content{
            width: 100%;
            height: 191px;
            background-color: red;
            position: relative;
            top: -191px;
        }
    </style>
</head>
<body>
    <p class="content">
        <p class="wrap">
            <p class="wrap-content">
            </p>
        </p>
    </p>
</body>
</html>

Analyse

Nutzungsprinzip:

Berechnungsmethode des Prozentwerts: Tatsächlich Wert = Breite und Höhe * Prozentwert des Vorgängerelements mit der ermittelten Breite und Höhe. Standardmäßig beträgt die Breite von Elementen auf Blockebene 100 % und die Höhe wird basierend auf dem Inhalt berechnet. Wenn also das Vorgängerelement keine bestimmte Höhe hat, kann der Prozentwert nicht bestimmt werden und sein Wert wird auf 0 gesetzt.

Wenn die Höhe des HTML-Elements auf „Height: 100 %“ eingestellt ist, ändert sich die Höhe des HTML-Elements mit der Höhe des Ansichtsfensters.

Verwandte Empfehlungen:

Über die relative Funktion in CSS

Das Positionsattribut absolute und relative horizontale Zentrierung im CSS-Stil

Im CSS-Positionsattribut: der Unterschied zwischen absolut und relativ

Das obige ist der detaillierte Inhalt vonCSS verwendet relative, um die Oberseite der Baidu-Homepage zu imitieren. 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