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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
