Erfahren Sie mehr über die detaillierte Verwendung der Kantenversatzeigenschaften oben, rechts, unten und links in CSS-CSS-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-06-28 09:38:50

Original

3904 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!