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="">
随机推荐
- Objective-C中的SEL、IMP和Class类型
1.SEL类型 例子: SEL say; SEL skin; Objective-C 在编译的时候, 会根据方法的名字(包括参数序列),生成一个用 来区分这个方法的唯一的一个 ID,这个 ...
- Swift - 邮件发送功能的实现
使用MessageUI.framework框架除了可以发送短信,还能发送Email,步骤如下: (1)首先判断设备是否有发送邮件功能 (2)如果设备允许发送邮件,创建一个MFMailComposeVi ...
- MySQL里求给定的时间是所在月份的第几个礼拜
Share 一个昨天写的函数. 目的是求给定的时间是所在月份的第几个礼拜. DELIMITER $$ USE `t_girl`$$ DROP FUNCTION IF EXISTS `weekofmon ...
- <转载>DIV+CSS position定位方法总结
如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...
- c语言， objective code(new 2)
参考: 1. C中的继承和多态 http://www.cnblogs.com/skynet/archive/2010/09/23/1833217.html
- 点击得到QTableWidget中任意位置QPushButton的行列信息
http://www.qtcn.org/bbs/read-htm-tid-51835.html http://www.qtcn.org/bbs/simple/?t43841.html 比如(点击每行最 ...
- 微信5.0 Android版飞机大战破解无敌模式手记
微信5.0 Android版飞机大战破解无敌模式手记 转载: http://www.blogjava.net/zh-weir/archive/2013/08/14/402821.html 微信5.0 ...
- Linux 静态库&动态库调用
1.什么是库在windows平台和linux平台下都大量存在着库.本质上来说库是一种可执行代码的二进制形式,可以被操作系统载入内存执行.由于windows和linux的本质不同,因此二者库的二进制是不 ...
- 简易的sniffer程序
真的非常简易,这个程序不过抓一些发送到本机的数据包,然后显示出来它们的一些信息罢了. 程序很easy! #include <WinSock2.h> #include ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...