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

在此说下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. const与define的使用区别

    1.const用于类成员变量定义,一旦定义且不能改变其值.define定义全局常量,在任何地方都可以访问. 2.define不能在类中定义而const可以. 3.const不能在条件语句中定义常量 i ...

  2. C语言声明解析方法

    1.C语言声明的单独语法成份     声明器是C语言声明的非常重要成份,他是所有声明的核心内容,简单的说:声明器就是标识符以及与它组合在一起的任何指针.函数括号.数组下表等,为了方便起见这里进行分类表 ...

  3. C++中vector的实现

     注意几点: 分配内存不要使用new和delete,由于new的同一时候就把对象构造了.而我们须要的是原始内存. 所以应该使用标准库提供的allocator类来实现内存的控制.当然也能够重载ope ...

  4. Square：从今天開始抛弃Fragment吧！

    原文链接 : Advocating Against Android Fragments 原文作者 : Pierre-Yves Ricau 译文出自 : 开发技术前线 www.devtf.cn 译者 : ...

  5. nginx+memcached+ftp上传图片+iis

    nginx+memcached+ftp上传图片+iis 自毕业以来,一直在现在公司做订餐系统的开发,那会儿没有口碑,没有饿了么,更别说美团外卖,百度外卖了...因为规模都比较小,都是一个服务器包含数据 ...

  6. 类似QtiPlot的veusz，sigmaplot，pymol

    qtiplot在win下没那么好编译 依赖很多外部包的 scidavis 和 labplot是从他fork出来的 比较接近Origin 可以用这两个 FreeBSD 的 ports 里有直接 cd / ...

  7. 用DELPHI的RTTI实现数据集的简单对象化

    在<强大的DELPHI RTTI--兼谈需要了解多种开发语言>一文中,我说了一下我用DELPHI的RTTI实现了数据集的简单对象化.本文将详细介绍一下我的实现方法.     首先从一个简单 ...

  8. 8天玩转并行开发——第三天 plinq的使用

    原文 8天玩转并行开发——第三天 plinq的使用 相信在.net平台下,我们都玩过linq,是的,linq让我们的程序简洁优美,简直玩的是爱不释手,但是传统的linq只是串行代码,在并行的 年代如果 ...

  9. 基于visual Studio2013解决面试题之0708字符串全排列

     题目

  10. Google用户登录界面 Android实现

    实验效果: 项目目录: Java代码(放在Src文件下) package com.bn.chap9.login; import java.io.BufferedReader; import java. ...