今日总结

最新推荐文章于 2025-01-14 22:08:57 发布

ws_991119

最新推荐文章于 2025-01-14 22:08:57 发布

阅读量123

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45379031/article/details/108285229

版权

今日总结

HTML网页布局常用的是：div和table元素。

1、使用div元素的网页布局
实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用div元素的网页布局</title>
</head>
<body>
	<div id="container" style="width:500px">
 
		<div id="header" style="background-color:#FFA500;">
			<h1 style="margin-bottom:0;">主要的网页标题</h1>
		</div>
 
		<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
			<b>菜单</b>
			<br>
			HTML<br>
			CSS<br>
			JavaScript
		</div>
 
		<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
		内容在这里
		</div>
 
		<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
		版权 © runoob.com
		</div>
 
	</div>
 
</body>
</html>

效果：
在这里插入图片描述
1，static(默认)
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。

一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

left,top属性对static没有效果，static是靠margin这些定位的。

2，relative(相对定位)
在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。

有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

3，absolute(绝对定位)
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。

如果没有父元素，位置是相对于body来进行的。

绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。的位置不变。
4. fixed(固定定位)
我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”，那么如果我想让一个元素定位的参照物总是整个文档(viewport)，怎么办呢？

答案是使用fixed定位，fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。比如你想添加一个信息提示的div，并将该div固定在右上方，你可以使用以下css

.element  { position:fixed; top:2%; right:2%;}

z-index

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意：

1 元素可拥有负的 z-index 属性值。

2 Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

z-index数值越大它的层叠等级就越高一些

一个小demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		body {
			margin: 0;
		}
		.main {
			width: 200px;
			height: 200px;
			background: #DD28A0;
			position: absolute
		}
		.main2 {
			width: 100px;
			height: 100px;
			background: #00d8a0;
			position: absolute;
			margin-left: 150px;
		}
		.main3{
			width: 50px;
			height: 50px;
			background: black;
			position: absolute;
			margin-top: 70px;
			margin-left: 180px;
		}
	</style>
 
	<body>
		<div class="main">
		</div>
		<div class="main2">
		</div>
		<div class="main3">
		</div>
 
	</body>
 
</html>