Dynamische Elementgröße durch CSS-Positionierungsmanipulation-CSS-Tutorial-php.cn

Dynamische Elementgröße durch CSS-Positionierungsmanipulation

不言

Freigeben： 2018-11-07 16:23:03

Original

3029 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

CSS

.mask{
  position:fixed;
  z-index:2;
  left:0;
  right:0;
  top:0; 
  bottom:0;  
  background-color:rgba(0,0,0,0.8);  
  }

Nach dem Login kopieren

Vollständiger Code:









文字内容
<div class="mask"></div>

Nach dem Login kopieren

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!