Learn more about the detailed usage of the edge offset properties top, right, bottom, and left in CSS-CSS Tutorial-php.cn

Learn more about the detailed usage of the edge offset properties top, right, bottom, and left in CSS

巴扎黑

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

Original

3908 people have browsed it

1: Top offset attribute

is used to define the size of the offset position of the top of the element. 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>

Copy after login

2: The right offset attribute right

is used to define the right side of the element The size of the side offset position. right: 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{
	  right: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  background: #666666;
	  width: 300px;
	  height: 50px;
	}
  </style>
 </head>

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

Copy after login

3: Bottom offset attributebottom

Use to define the size of the bottom offset position. 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>

Copy after login

4: The left offset attribute left

is used to define the size of the left offset position of the element, left: auto | length | percent;

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

Copy after login

The above is the detailed content of Learn more about the detailed usage of the edge offset properties top, right, bottom, and left in CSS. For more information, please follow other related articles on the PHP Chinese website!