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

在此说下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. POJ - 1185 炮兵阵地 (状态压缩)

    题目大意:中文题目就不多说大意了 解题思路: 1.每行最多仅仅有十个位置,且不是山地就是平原,那么就能够用1表示山地,0表示平原,将每一行的状态进行压缩了 2.接着找出每行能放炮兵的状态.先不考虑其它 ...

  2. Ubuntu Crontab

    Ubuntu启用Crontab 启动cron服务: service cron start 如果需要设置为开机时自动启动,则执行 sysv-rc-conf --level 35 cron on 另外,u ...

  3. Windows串口编程

    串口基础知识 http://www.cnblogs.com/menlsh/archive/2013/01/28/2880580.html DTU知识 http://blog.csdn.net/xuto ...

  4. Boost下载安装编译配置使用指南（含Windows和Linux

    理论上,本文适用于boost的各个版本,尤其是最新版本1.45.0:适用于各种C++编译器,如VC6.0(部分库不支持),VS2003,VS2005,VS2008,gcc,C++ Builder等.先 ...

  5. 积累的VC编程小技巧之编辑框

    1.如何让对话框中的编辑框接收对话框的消息 ////////////////////////////////////////////////// 如何让对话框中的CEdit控件类接收对话框的消息/// ...

  6. vc 制作图片资源dll

    方法一: 使用纯WIN32 DLL方法封装纯资源第一步,通过VS2005建立WIN32 DLL 空工程第二步,设置配置属性->链接器->高级->无入口点(是/NOENTRY)设置配置 ...

  7. Lucene.Net 2.3.1开发介绍 —— 四、搜索（二）

    原文:Lucene.Net 2.3.1开发介绍 -- 四.搜索(二) 4.3 表达式用户搜索,只会输入一个或几个词,也可能是一句话.输入的语句是如何变成搜索条件的上一篇已经略有提及. 4.3.1 观察 ...

  8. C/C++中char* 与char []定义的区别

    转载请注明来自souldak,微博:@evagle Question: 给你一个字符串例如abb输出它包含的字符的所有可能排列. 例如abb输出3个:abb,bab,bba Answer: 假设我们自 ...

  9. uva 10196 Check The Check

    题目:10196 - Check The Check 思路:水题..模拟 这个代码,前半部分是在数统机房上课的时候写的,挫了点,懒得改了. #include <cstdio> #inclu ...

  10. AS3开发必须掌握的内容

    1.事件机制 2.显示列表 3.垃圾回收 4.常用方法 5.网络通信 6.位图动画 7.渲染机制 8.API结构 9.沙箱机制 10.资源管理 11.内存管理 12.性能优化 13.资源选择 14.安 ...