Heim >Web-Frontend >CSS-Tutorial >Einführung und Beispiele der CSS-Positionierung links rechts oben unten
Einführung und Beispiele der CSS-Positionierung links rechts oben unten
- 巴扎黑Original
- 2017-06-28 09:42:032009Durchsuche
Diese vier CSS-Attributstile werden verwendet, um die Objektbox zu positionieren. Der Attributwert Position muss als absolut oder relativ definiert werden, damit dieser Wert wirksam wird.
1. Grammatische Struktur
Links, rechts, oben, unten gefolgt von Zahlen + HTML-Einheiten.
Demonstrationsstruktur
div{left:20px}
div{right:20px}
div{top:20px}
div{bottom:20px}
Left Der Abstand nach links
Right Der Abstand nach rechts
Top Der Abstand von oben
Der Abstand von unten nach unten
2. Nutzungsbedingungen
Normalerweise ist die Verwendung von links, rechts, oben, unten allein ungültig. Sie müssen die absolute PositionierungCSS-Positionsstil verwenden wirksam werden.
Im Allgemeinen kann in einem Stil nur links und rechts verwendet werden. Sie können nicht sowohl links als auch rechts verwenden, wenn sowohl links als auch rechts verwendet werden Dann treten Kompatibilitätsprobleme auf. Wenn ein Objekt auf einen bestimmten Abstand nach links eingestellt ist, ist der Abstand nach rechts natürlich vorhanden, sodass keine Notwendigkeit besteht, den Abstand nach links festzulegen.
Auf die gleiche Weise kann für ein Objekt nur eine von oben und unten verwendet werden, da sonst logische Kompatibilitätsprobleme auftreten. Wenn Sie zum Beispiel von einer Person aufgefordert werden, nach links zu gehen, und von einer anderen Person, die Sie bittet, nach rechts zu gehen, und Ihnen gleichzeitig gesagt wird, dass Sie nach links oder rechts gehen sollen, ist es für Sie schwierig zu beurteilen, in welche Richtung Sie gehen sollen.
3. Verwendung bei absoluter Positionierung
Im Allgemeinen werden links, rechts, oben und unten verwendet, um das Objekt in Verbindung mit der Position zu positionieren. Sie können das CSS-Positions-Tutorial besuchen, um mehr über diese Stilattribute zu erfahren.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function selA(id) {
switch(id) {
case "1":
document.getElementById("subobj").style.position = "static";
break;
case "2":
document.getElementById("subobj").style.position = "absolute";
break;
case "3":
document.getElementById("subobj").style.position = "relative";
break;
case "4":
document.getElementById("subobj").style.position = "fixed";
break;
}
}
</script>
<style type="text/css">
#all {
width:190px;
height:95px;
padding:10px 0 0 10px;
border:1px #000 solid;
position:relative;
}
#subobj {
width:100px;
height:50px;
border:1px #000 solid;
bottom:9px;
position:static;
}
#sel {
margin-top:5px;
}
select {
width:200px;
}
</style>
</head>
<body>
<div id="all">
<div id="subobj">子对象1</div>
</div>
<div id="sel"><select onchange="selA(this.value)"><option value="1">static</option><option value="2">absolute</option><option value="3">relative</option><option value="4">fixed</option></select></div>
</body>
</html>Das obige ist der detaillierte Inhalt vonEinführung und Beispiele der CSS-Positionierung links rechts oben unten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!