Heim >Web-Frontend >CSS-Tutorial >Erfahren Sie mehr über die detaillierte Verwendung der Kantenversatzeigenschaften oben, rechts, unten und links in CSS

Erfahren Sie mehr über die detaillierte Verwendung der Kantenversatzeigenschaften oben, rechts, unten und links in CSS

巴扎黑Original: 2017-06-28 09:38:503902Durchsuche

1: Oberer Versatz Das Attribut

wird verwendet, um die Größe der Versatzposition der Oberseite des Elements zu definieren. oben: auto |. Länge |. Prozent

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS属性实例 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    p{
	  top: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  background: #666666;
	  width: 300px;
	  height: 50px;
	}
  </style>
 </head>

 <body>
   <p>这是使用边偏移属性的实例</p>
 </body>
</html>

2: Das rechte Offset-Attribut rechts

wird verwendet Definieren Sie die Größe der rechten Versatzposition des Elements. rechts: auto |. Länge |. Prozent;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> css属性实例 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    p{
	  right: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  background: #666666;
	  width: 300px;
	  height: 50px;
	}
  </style>
 </head>

 <body>
  <p>这是使用边偏移属性的实例</p>
 </body>
</html>

3: Unteres Offset-Attribut

bottom

Wird verwendet, um die Größe der unteren Versatzposition zu definieren. unten:auto |. Länge |. Prozent;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> css属性实例 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    p {
	  bottom: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  width: 300px;
	  height: 50px;
    }
  </style>
 </head>

 <body>
  <p>这是使用下边偏移属性bottom</p>
 </body>
</html>

4: Das linke Offset-Attribut left

wird verwendet, um die Größe der linken Offset-Position zu definieren des Elements. links: auto |. Länge |.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
     p {
		 left: 100px;
		 position: absolute;
		 border: 2px solid #333333;
		 background: #666666;
		 width: 300px;
		 height: 50px;
	 }
  </style>
 </head>

 <body>
   <p>这是使用左边偏移属性的实例</p>
 </body>
</html>

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die detaillierte Verwendung der Kantenversatzeigenschaften oben, rechts, unten und links in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS Magic Hall: Verstehen Sie den Z-Index wirklich?Nächster Artikel：CSS Magic Hall: Verstehen Sie den Z-Index wirklich?

In Verbindung stehende Artikel

Mehr sehen