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

在此说下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. Mina airQQ聊天 服务端篇（二）

    Mina聊天服务端实现思路:在用户登录的时候.连接服务端而且验证登录用户,假设成功,则将IoSession保存到map<账号,IoSession>中,而且通知该用户的好友上线,然 后再请求 ...

  2. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  3. 基于visual Studio2013解决C语言竞赛题之1080填运算符

        题目 解决代码及点评 /************************************************************************/ /* ...

  4. phpcms 列表页中，如何调用其下的所有子栏目(或特定的子栏目)？

    {pc:get sql="select * from phpcms_category where catid in(你的子栏目ID)" return="data" ...

  5. POJ3436 ACM Computer Factory 【最大流】

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5412   Accepted: 1 ...

  6. C# 它 抽象类和接口

    抽象类 C#同意把类和方法声明为abstract,即抽象类和抽象方法.抽象类通常代表一个抽象概念,它提供一个继承的出发点,当设计一个新的对象类时,一定是用来继承的,所以,在一个以继承关系形成的等级结构 ...

  7. Linux - VIM（VI）编辑器

    VIM(VI)编辑器 简介: VI是一个命令行界面下的文本编辑工具,最早在1976年BILL Joy开发,当时的名字叫做ex.VI支持绝大多数操作系统(最早在BSD上发布),并且功能已经十分强大. 1 ...

  8. jvm常用参数设置 good

    1.堆的大小可以通过 -Xms 和 -Xmx 来设置,一般将他们设置为相同的大小,目的是避免在每次垃圾回收后重新调整堆的大小,比如 -Xms=2g -Xmx=2g 或者 -Xms=512m -Xmx= ...

  9. 成都大数据Hadoop与Spark技术培训班

    成都大数据Hadoop与Spark技术培训班   中国信息化培训中心特推出了大数据技术架构及应用实战课程培训班,通过专业的大数据Hadoop与Spark技术架构体系与业界真实案例来全面提升大数据工程师 ...

  10. hdu 1387 Team Queue （链表）

    题目大意: 不同的人在不同的队伍里,插入链表的时候假设这个链表里有他的队友,就把它放到最后一个队友的最后.假设没有队友,就把它放到整个链表的最后面. 出链表的时候把第一个人拿出来. 思路分析: 要模拟 ...