深入了解CSS中邊偏移屬性top，right，bottom，left的詳細用法-css教學-PHP中文網

深入了解CSS中邊偏移屬性top，right，bottom，left的詳細用法

巴扎黑

發布： 2017-06-28 09:38:50

原創

3877 人瀏覽過

1：上邊偏移屬性

用來定義元素頂端偏移位置的大小。 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：右邊偏移屬性right

用來定義元素右側偏移位置的大小。 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>

登入後複製

3：下邊偏移屬性bottom

用來定義底部偏移位置的大小。 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：左邊偏移屬性left

用來定義元素左邊偏移位置的大小，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>

登入後複製

以上是深入了解CSS中邊偏移屬性top，right，bottom，left的詳細用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！