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="">
随机推荐
- perl post发送json数据
sub wx_init { #$login_url ="https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxinit?r=- ...
- Linear Regression（线性回归）（三）—代价函数J(θ)选择的概率解释
(整理自AndrewNG的课件,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 在遇到线性回归问题时,我们总是令.可是我们为什么这样选择代价函数呢 ...
- shell telnet 路由器
#!/usr/bin/expect -f spawn telnet 172.16.1.80 expect "login" { send "admin\n" ex ...
- 获取TBitMap图像缓冲区，提高图像处理速度
使用Dephi进行图像处理可以有多种方法,最常用的应该算是TBitmap,它提供方便的图像存取能力,结合Canvas可进行画线.画圆.图像拷贝等操作.不过在进行大量的图像处理操作时,为了获得更高的速度 ...
- 使用perf生成Flame Graph(火焰图)
具体的步骤参见这里: <flame graph:图形化perf call stack数据的小工具> 使用SystemTap脚本制作火焰图,内存较少时,分配存储采样的数组可能失败,需 ...
- [精读]Spationtemporal Saliency Detection Using Textural Contrast and Its Applications
Spationtemporal Saliency Detection Using Textural Contrast and Its Applications Last Edit 2013/12/3 ...
- Webcast / 技术小视频制作方法——自己动手录制video轻松搞定
Webcast / 技术小视频制作方法——自己动手录制video轻松搞定 http://blog.sina.com.cn/s/blog_67d387490100wdnh.html 最近申请加入MSP的 ...
- [置顶] ※数据结构※→☆线性表结构（queue）☆============循环队列 顺序存储结构（queue circular sequence）（十）
循环队列 为充分利用向量空间,克服"假溢出"现象的方法是:将向量空间想象为一个首尾相接的圆环,并称这种向量为循环向量.存储在其中的队列称为循环队列(Circular Queue). ...
- google 搜索url详解
www.google.com [http://www.google.cn/search?q=112&hl=zh-CN&client=aff- 360daohang&hs=yhE ...
- Indy的TCPServer到底能支持多少个连接
最近一个项目,最开始使用IdTcpServer,在大压力测试的时候,只连接了800个多一点的客户端(每个客户端连接上之后每秒钟发送一个几十字节的报文,服务器应答).但是持续的时间不会超过10分钟,服务 ...