Heim >Web-Frontend >CSS-Tutorial >Dynamische Elementgröße durch CSS-Positionierungsmanipulation
Dynamische Elementgröße durch CSS-Positionierungsmanipulation
- 不言Original
- 2018-11-07 16:23:033007Durchsuche
Dieser Artikel stellt Ihnen den Inhalt der dynamischen Elementgröße durch CSS-Positionierungsoperation vor. Interessierte können sich ohne weiteres einen Blick auf den spezifischen Inhalt werfen.
Tipps zum Bereitstellen von Elementen für Volumes ohne Verwendung von Breite und Höhe oder JS.
Dies ist ein sehr einfacher Trick, den viele Menschen nicht kennen. (Empfohlenes Tutorial: CSS-Video-Tutorial)
Angenommen, Sie möchten eine modale Box erstellen, die alle Bildschirme außer 100 Pixel pro Bildschirm enthält. Wie würden Sie dieses Problem lösen?
Angenommen, Sie möchten ein Modal erstellen, das den gesamten Bildschirm bis auf 100 Pixel jedes Randes abdeckt. Wie würden Sie dieses Problem lösen?
HTML
<div class="popup">some content</div>
Zuerst müssen wir ein Attribut position:fixed zu unserem div hinzufügen.
Danach möchten wir die modalen 100 Pixel von jeder Seite des Ansichtsfensters aus positionieren. Warum sollten wir ihm nicht alle 4 Positionsattributparameter (oben, rechts, unten, links) zuweisen?
Die Lösung besteht darin, dass Sie alle 4 Parameter der festen/absoluten Positionierung angeben können, oben: 100px, rechts: 100px, unten: 100px; links: 100px;
Auf diese Weise können Sie dynamische Elementgrößen entsprechend ab 100 Pixel auf jeder Seite festlegen.
CSS
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
/*some styles*/
background-color:#ccc;
border-radius:10px;
border:solid 3px #000;
padding:20px;
}Das resultierende Div ist eine modale Box mit automatischer Größe ohne eine einzige Zeile JS.
Vollständiger Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
background-color:#ccc;
border-radius:10px;
border:solid 3px #000;
padding:20px;
}
</style>
</head>
<body>
<div class="popup">文字内容</div>
</body>
</html>Angenommen, Sie möchten eine Maske unter der Modalbox hinzufügen, genau die gleiche Idee!
Hier ist die Lösung:
HTML:
<div class="mask"></div>
CSS
.mask{
position:fixed;
z-index:2;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,0.8);
}Vollständiger Code:
Das obige ist der detaillierte Inhalt vonDynamische Elementgröße durch CSS-Positionierungsmanipulation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!