html练习（5）
这个练习主要简单的展示了据对定位和相对定位；
在此说下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="">
随机推荐
- 使用 Spring RestTemplate 调用 rest 服务时自定义请求头（custom HTTP headers）
在 Spring 3.0 中可以通过 HttpEntity 对象自定义请求头信息,如: private static final String APPLICATION_PDF = "app ...
- 关于Get和Post
get和post 简介: Get和post是表单提交数据的两种基本方式,get请求数据通过域名后缀url传送,用户可见,不安全,post请求数据通过在请求报文正文里传输,相对比较安全. get是通过u ...
- Spring3.0 入门进阶(1):从配置文件装载Bean
Spring 已经盛行多年,目前已经处于3.0阶段,关于Spring的概念介绍性的东西网上已经很多,本系列博客主要是把一些知识点通过代码的方式总结起来,以便查阅. 作为入门,本篇主要介绍Bean的加载 ...
- Java与C#的语法区别（不断更新中...）
1.static关键字: 在java中静态成员能够被对象和类名调用: 在C#中,静态成员只能被类调用不能被对象调用. 2.for循环: 在java中可以在for前面添加标记,然后在for循环中可以br ...
- ubuntu 安装 maven3.2
1.下载并解压 apache-maven-3.2.5-bin.tar.gz tar -xzvf apache-maven--bin.tar.gz 2.设置环境变量 sudo gedit ~/.prof ...
- [置顶] ArcGIS发布最新的 ArcGIS Runtime SDK for Android v10.1.1
因为希望有统一的地图解决方案,就是PC端,移动端的数据一致,看到ArcGIS的最新发布,感兴趣的可以围观. 链接:http://blogs.esri.com/esri/arcgis/2013/09/0 ...
- .net程序员面试不完全指南
程序员找工作难,想要被成功聘用更难.最常见的办法是经历一次又一次的面试失败后自己琢磨出面试技巧,当然也可以花钱到一些培训机构去接受专业的书面简历和模拟面试的指导.这些方法可能都会奏效,但是却并不是时间 ...
- Delphi线程池
unit uThreadPool; { aPool.AddRequest(TMyRequest.Create(RequestParam1, RequestParam2, ...)); } inte ...
- Windows 8 动手实验系列教程 实验5：进程生命周期管理
动手实验 实验5:进程生命周期管理 2012年9月 简介 进程生命周期管理对构建Windows应用商店应用的开发者来说是需要理解的最重要的概念之一.不同于传统的Windows应用(它们即使在后台仍然继 ...
- 编译android-4.3.1_r源代码并刷到自己的Galaxy Nexus I9250真机上
编译android-4.3.1_r源代码并刷到自己的Galaxy Nexus I9250真机上 作者:雨水 日期:2014-04-30 编译源码的目的还是为了自己改动源码,然后还可以执行在相应的手机 ...