css中的布局详解

来源：互联网发布：visio mac版下载编辑：程序博客网时间：2024/05/19 10:40

CSS布局模型分为流动模型和浮动模型，层模型，分为绝对定位，相对定位，固定定位

1.绝对定位是相对于父标签，一般是body。绝对定位是将该元素从文档流中删除，然后在依照父标签（一般是body）和位置，建立一个标签，可以和已有标签重合。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative样式</title><style type="text/css"> #div1{width:200px;    height:200px;border:2px red solid;position:absolute;    left:100px;    top:50px;}</style></head><body><div id="div1"></div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></body></html>

2.相对定位是相对于原来位置，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative样式</title><style type="text/css"> #div1{width:200px;    height:200px;border:2px red solid;position:relative;    left:100px;    top:50px;}</style></head><body><div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></body></body></html>

3.固定定位：固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#gd{width:500px;height:500px;background:red;position:fixed;}#jd{width:300px;height:300px;background:blue;position:absolute;left:400px;top:1000px;}</style></head><body><div id="jd">我是绝对定位</div><div id="gd">我是固定定位</div></body></html>

4.relative与absolute组合使用，absolute一般是相对于body标签的位置，若要向对于其他标签，则需要是其父标签是relative，它是absolute。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>相对参照元素进行定位</title><style type="text/css">div{border:2px red solid;} #box1{    width:200px;    height:200px;    position:relative;       } #box2{ position:absolute;top:20px;left:30px;      }</style></head><body><div id="box1"><div id="box2">相对参照元素进行定位</div></div></body></html>

0 0