recherche

Maison  >  Article  >  interface Web  >  En savoir plus sur l'utilisation détaillée des propriétés de décalage de bord haut, droite, bas et gauche dans CSS

En savoir plus sur l'utilisation détaillée des propriétés de décalage de bord haut, droite, bas et gauche dans CSS

巴扎黑
巴扎黑original
2017-06-28 09:38:503874parcourir

1 : Top offset attribut

est utilisé pour définir la taille de la position de décalage du haut de l'élément. top: auto | length | percent

<!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 : L'attribut de décalage droit right

est utilisé pour définir La taille de la position de décalage droite de l'élément. droite : auto | longueur | pourcentage ;

<!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 : attribut de décalage inférieurbas

Utilisé pour définir la taille de la position de décalage inférieure. bottom:auto | length | percent;

<!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 : L'attribut de décalage gauche left

est utilisé pour définir la taille de la position de décalage gauche de l'élément gauche : auto | longueur pour cent ;

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS Magic Hall : Comprenez-vous vraiment z-index ?Article suivant：CSS Magic Hall : Comprenez-vous vraiment z-index ?

Articles Liés

Voir plus