<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0pxpadding:0px}
ul{width:1212pxheight:40pxmargin:60px auto}
ul li{width:200pxheight:40pxbackground:#eeeborder:1px solid redfloat:leftlist-style-type:noneposition:relative
/*修正1*/
z-index:3}
.content{width:1212pxposition:absoluteheight:600pxbackground:#eeetop:40pxleft:-200px
/*修正2*/
z-index:1}
/*修正3*/
.active{z-index:2}
</style>
</head>
<body>
<ul>
<li></li>
<!-- 修正4 -->
<li class = "active"><div class="content"></div></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
一、打消凹凸机关隔绝距离DIV之间距离
让两个高低构造DIV块距离为零，通常熟手在行在出产DIV CSS页面的时刻，不会思考到初始化CSS属性，如许各标签属性默许的CSS属性将会形成错位、兼容等题目。
如高下组织的2个box DIV块，中间有一定间距无法消弭
二、肃除DIV间距计划方法
在CSS里配置DIV标签各属性参数为0
div{margin:0border:0padding:0}
这里就设置装备摆设了DIV标签CSS属性相称于初始化了DIV标签CSS属性，这里设置装备摆设margin外边距为0；边框border属性为0与内补白也为0；这样相当于就初始化了DIV盒子之间距各属性隔断为0，何等就不会组成DIV直接有未必的隔绝距离。
只管引荐在制作斥地DIV CSS的时候最佳将网页CSS属性、经常应用网页标签初始化一下。
CSS初始化才能地址：//www.css5.com.cn/mokuai/17.shtml
三、配置DIV盒子之间间距
以上是使用CSS革除盒子之间间隔。今后为人人引见设置盒子之间间距。
应用CSS花样单词为margin(可进入CSS margin教程相熟详细应用方式)。
1、设置对象的高下间距
.CSS5-a{margin:10px 0}
配置“CSS5-a”对象高下间距为10px,摆布为0
2、设置对象摆布隔断
.CSS5-b{margin:0 8px}
设置装备摆设“CSS5-b”对象高下间距为0,摆布为8px
3、设置装备摆设DIV盒子与上方相邻间距
.CSS5-c{margin-top:10px}
配置“CSS5-c”对象与上方相邻间距为10px
4、设置DIV盒子与下方相邻隔断
.CSS5-d{margin-bottom:10px}
设置装备摆设“CSS5-d”对象与下方相邻间距为10px
5、设置DIV盒子与左方相邻间距
.CSS5-e{margin-left:9px}
设置“CSS5-e”对象与左侧方相邻间距为9px
6、配置盒子与右方相邻隔断
.CSS5-f{margin-right:12px}
设置“CSS5-f”对象与右方相邻间距为12px
以上咱们为了方便介绍margin设置对象外间距，将对象分别CSS定名为".CSS5-a"至“.CSS5-f”,理论使历时刻加倍需求定名。
比较简单的做法就是，将他们放置一个盒子内，你想让文字跟图片居中，那么不一定要让图片当文字的参照物，而是让他们在大盒子内居中，不需要太复杂的框架结构，只需要利用样式的属性即可，并且各个浏览器都会正常显示，代码如下：<div class="box">
<img src="6107.jpg">
这里是居中的文字
</div>
<style>
.box{width:300pxtext-align:centerfont-szie:18px}
.box img {width:100%}
</style>
