html练习（5）

全栈程序员站长

发布于 2022-07-07 17:58:02

3730

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是全栈君。

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

在此说下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; }

执行的效果图：