Einführung und Beispiele der CSS-Positionierung links rechts oben unten-CSS-Tutorial-php.cn

Einführung und Beispiele der CSS-Positionierung links rechts oben unten

巴扎黑

Freigeben： 2017-06-28 09:42:03

Original

2001 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!