So verwenden Sie das untere Attribut in CSS-CSS-Tutorial-php.cn

So verwenden Sie das untere Attribut in CSS

WBOY

Freigeben： 2024-02-26 21:12:06

Original

1246 Leute haben es durchsucht

So verwenden Sie das untere Attribut in CSS

Die Eigenschaft „bottom“ in CSS wird verwendet, um die Position der unteren Kante eines Elements relativ zu seinem übergeordneten Element festzulegen. Durch Anpassen des Werts des unteren Attributs können Sie die vertikale Position des Elements ändern. Im Folgenden werden die Rolle und Verwendung des unteren Attributs ausführlich vorgestellt und einige Codebeispiele zur Veranschaulichung bereitgestellt.

Die Rolle des unteren Attributs
Das untere Attribut wird verwendet, um ein Element relativ zum unteren Rand seines übergeordneten Elements zu positionieren. Es ist eine der Positionierungseigenschaften in CSS. Durch die Verwendung des Attributs „bottom“ kann sich das Element entlang der Unterkante in vertikaler Richtung bewegen, ohne dass sich dies auf die Größe des Elements selbst auswirkt.
So verwenden Sie das untere Attribut
Der Wert des unteren Attributs kann ein bestimmter Pixelwert oder Prozentwert sein oder er kann automatisch sein oder erben.

Pixelwerte verwenden
Sie können Pixelwerte verwenden, um den Abstand eines Elements vom unteren Rand seines übergeordneten Elements anzugeben. Der folgende Code positioniert beispielsweise ein Element 100 Pixel vom unteren Rand seines übergeordneten Elements entfernt:
```
.element {
position: absolute;
bottom: 100px;
}
```
Nach dem Login kopieren
Prozentwerte verwenden
Zusätzlich zur Verwendung von Pixelwerten können Sie auch Prozentwerte verwenden, um den Abstand eines festzulegen Element vom unteren Rand seines übergeordneten Elements. Prozentwerte werden relativ zur Höhe des übergeordneten Elements berechnet. Der folgende Code legt beispielsweise den Abstand des Elements vom unteren Rand des übergeordneten Elements auf 50 % der Höhe des übergeordneten Elements fest:
```
.element {
position: absolute;
bottom: 50%;
}
```
Nach dem Login kopieren
Auto und Inherit verwenden
auto ist der Standardwert des unteren Attributs. Dies gibt an, dass das Element gemäß dem normalen Dokumentfluss angeordnet wird. Wenn Sie die untere Eigenschaft auf ihren Standardwert zurücksetzen möchten, können Sie auto verwenden.

inherit bedeutet, dass das Element den unteren Attributwert des übergeordneten Elements erbt. Der folgende Code legt beispielsweise den unteren Attributwert des Elements so fest, dass er den unteren Attributwert des übergeordneten Elements erbt:

.parent {
  position: relative;
  bottom: 100px;
}

.child {
  position: absolute;
  bottom: inherit;
}

Nach dem Login kopieren

Codebeispiel
Hier ist ein vollständiges Codebeispiel, das zeigt, wie das untere Attribut verwendet wird, um den unteren Rand zu positionieren ein Element:
```
<!DOCTYPE html>
<html>
<head>
  <style>
 .container {
   position: relative;
   width: 300px;
   height: 300px;
   background-color: gray;
 }
 
 .element {
   position: absolute;
   bottom: 20px;
   width: 100px;
   height: 100px;
   background-color: red;
 }
  </style>
</head>
<body>
  <div class="container">
 <div class="element"></div>
  </div>
</body>
</html>
```
Nach dem Login kopieren
Im obigen Beispiel wird ein Containerelement erstellt und auf relative Positionierung eingestellt. Erstellen Sie dann ein Element innerhalb des Containers und positionieren Sie das Element mithilfe der absoluten Positionierung 20 Pixel vom unteren Rand des Containers entfernt, indem Sie die Eigenschaft „bottom“ auf „20px“ festlegen.

Durch die Lektüre dieses Artikels verstehen wir die Rolle und Verwendung des unteren Attributs in CSS und stellen einige Codebeispiele zur Veranschaulichung bereit. Durch die Verwendung des unteren Attributs können wir die Position des Elements in vertikaler Richtung flexibel anpassen und so das Seitenlayout freier gestalten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das untere Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!