这个练习主要简单的展示了据对定位和相对定位；

在此说下html的定位：

1.static定位

这个是默认的方式。对static而言。left和right是不生效的。

2.relative定位（相对定位）

元素框偏离自身流相应的位置（靠left和top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。

注意：relative的參照点是它原来的位置，进行移动

3.absolute定位（绝对定位）

相当于元素从原来的位置脱离。并让出自己的空间，后面的元素就会占有让出的空间。

注意：absolute定位是相对于离自己近期的那个非标准流盒子而言的。

4.fixed定位

元素框的表现类似于将position设置为absolute，只是其包括块是视窗本身。

代码：

html文件（test5.html）:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>作者：一叶扁舟</title><!--

/*练习绝对定位和相对定位*/

    --><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="./test5.css">



  </head>  

  <body>

    <h1>练习html的定位，包含绝对定位和相对定位</h1>

    <div class = "class1">

   相对定位

    <div class = "style1">这是第一个方格</div>

    <div class = "style1" id = "style2">这是第二个方格</div>

    <div class = "style1">这第三个方格</div>

   <div class = "style1">这是第四个方格</div>

   </div>

   <div class ="class1">

   绝对定位

    <div class = "style1">这是第五个方格</div>

    <div class = "style1" id = "style3">这是第六个方格</div>

    <div class = "style1">这第七个方格</div>

   <div class = "style1">这是第八个方格</div>

   </div>

  </body>

</html>

CSS文件（test5.css）:

.style1 {

width:100px;

height:70px;

background-color:red;

margin-top:12px;

margin-left:3px;

float:left;

}



body {

width:800px;

height:500px;

border:2px solid blue;

background-color:green;



}









#style2 {

/*使用相对定位*/

position:relative;

left:110px;

top:90px;

}





div.class1 {

width:700px;

height:200px;

border:1px solid gray;

}



#style3 {

/*使用绝对定位*/

position:absolute;

left:400px;

top:300px;

}

执行的效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY2MjMyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

随机推荐

  1. 有N个正实数(注意是实数，大小升序排列) x1 , x2 ... xN，另有一个实数M。 需要选出若干个x，使这几个x的和与 M 最接近。 请描述实现算法，并指出算法复杂度

    题目:有N个正实数(注意是实数,大小升序排列) x1 , x2 ... xN,另有一个实数M. 需要选出若干个x,使这几个x的和与 M 最接近. 请描述实现算法,并指出算法复杂度. 代码如下: #in ...

  2. javascript 中 undefined 和 null 区别

    1.相同点 如果我们直接用 undefined == null  比较他们是相等的返回的将是 true. 2.区别 当我们用undefined === null 比较的时候最后返回的将是 false. ...

  3. 学习老外用webstorm开发nodejs的技巧--代码提示DefinitelyTyped

    最近入了nodejs的坑,作为老码农,js对我来说还是很容易的.webstorm虽说用得不多,但是pycharms我是老手了,idea的东西一脉相承,想想也就那样了. 但是自从看了某个视频后,觉得毕竟 ...

  4. NGUI: Documentation

    Video Tutorials Basic Tutorial (v.2.5.0+) SD & HD atlas switching (advanced) Packed Font (advanc ...

  5. SRM 583 Div II Level One：SwappingDigits

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12609 #include <iostream> # ...

  6. mysql 分区和集群

    集群和分区:http://han-zw.iteye.com/blog/1662941http://www.php-note.com/article/detail/794 分区:http://lober ...

  7. QMediaPlayer的duration问题

    遇到了一个坑QMediaPlayer::duration的坑. 这个坑是当你setMedia之后, 直接使用duration获取播放时长会得到0, 出错时候的代码片段例如以下: void MainWi ...

  8. unity3d游戏开发学习之使用3dmax创建导弹模型

    在着手研究Unity3D的游戏开发时,3D模型能够考虑从unity的assets store去获取,也能够从网上搜索下载,同一时候咱们也能够尝试下自己动手去做一些简单的模型. 这里就依据unity3d ...

  9. Android菜鸟的成长笔记（11）——Android中的事件处理

    原文:[置顶] Android菜鸟的成长笔记(11)——Android中的事件处理 Android提供了两种方式来处理事件,一个是基于回调的事件处理,另一个是基于监听的事件处理,举个例子: 基于回调的 ...

  10. win7下不能收到窗口hook消息的问题

    win7下由于UIPI的限制, 高权限进程无法收到底权限进程发来的消息, 因此对窗口消息hook时无法接收到消息,解决办法是在调用SetWindowsHookEx之前先调用ChangeWindowMe ...