Die CSS-Eigenschaft „Bottom“ wird verwendet, um den unteren Rand des Elements anzugeben. Diese Eigenschaft definiert den Versatz zwischen der unteren Randgrenze des positionierten Elements und der unteren Grenze seines enthaltenden Blocks. Wenn der Wert der Eigenschaft „position“ „statisch“ ist, hat das Setzen der Eigenschaft „bottom“ keine Auswirkung.
Wie verwende ich das CSS-Bottom-Attribut?
Funktion: Das untere Attribut gibt den unteren Rand des Elements an.
Beschreibung: Dieses Attribut definiert den Versatz zwischen der unteren Randgrenze des positionierten Elements und der unteren Grenze seines enthaltenden Blocks. Wenn der Wert der Eigenschaft „position“ „statisch“ ist, hat das Setzen der Eigenschaft „bottom“ keine Auswirkung.
Hinweis: Alle gängigen Browser unterstützen das Bottom-Attribut. Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.
Beispiel für die Verwendung des CSS-Bottom-Attributs
<html>
<head>
<style type="text/css">
img.ex1
{
position:absolute;
bottom:0px;
}
img.ex2
{
position:relative;
bottom:-100px;
}
</style>
</head>
<body>
<img class="ex1" src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" / alt="So verwenden Sie die CSS-Bottom-Eigenschaft" >
<h1>This is a heading</h1>
<img class="ex2" src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" / alt="So verwenden Sie die CSS-Bottom-Eigenschaft" >
</body>
</html>Effektausgabe:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Bottom-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist es schwierig, Java selbst zu lernen?
Ist die Geschwindigkeit von PHP8.0 verbessert?
Lohnt es sich, FIL langfristig zu halten?
Aus welchen Komponenten besteht ein Linux-System?
Einführung in Screenshot-Tastenkombinationen in Win8
So stellen Sie die IP ein
Datenanalysemethoden
So beheben Sie den HTTP-Request-415-Fehler
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
