CSS中边偏移属性top，right，bottom，left

最新推荐文章于 2024-08-01 22:25:03 发布

波哥的技术积累

最新推荐文章于 2024-08-01 22:25:03 发布

阅读量3.3w

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/woshisap/article/details/8484244

版权

css 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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>
    div{
	  top: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  background: #666666;
	  width: 300px;
	  height: 50px;
	}
  </style>
 </head>

 <body>
   <div>这是使用边偏移属性的实例</div>
 </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>
    div{
	  right: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  background: #666666;
	  width: 300px;
	  height: 50px;
	}
  </style>
 </head>

 <body>
  <div>这是使用边偏移属性的实例</div>
 </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>
    div {
	  bottom: 100px;
	  position: absolute;
	  border: 2px solid #333333;
	  width: 300px;
	  height: 50px;
    }
  </style>
 </head>

 <body>
  <div>这是使用下边偏移属性bottom</div>
 </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>
     div {
		 left: 100px;
		 position: absolute;
		 border: 2px solid #333333;
		 background: #666666;
		 width: 300px;
		 height: 50px;
	 }
  </style>
 </head>

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