给大家带来css网页制造技能:margin负值和bug的办理

网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
破洛洛文章简介：比来做的项目中常常会用到margin的负值，这里就总结一下关于margin负值的5种利用及相干bug的办理。
比来做的项目中常常会用到margin的负值，这里就总结一下关于margin负值的5种利用

及相干bug的办理。

1.在活动性结构中的使用
如WordPress的两栏式不流动结构就是利用margin负值来完成的定位，属于摆布

margin负值在活动性结构中的使用。

<divstyle="width:200px;float:left;border-right:4pxsolid#CEE1EE;margin-right:-200px;">
左边宽度流动
</div>
<divstyle="backround:#888;margin-left:200px;">
宽度自顺应，啦啦啦。。。宽度自顺应，啦啦啦。。。宽度自顺应，啦啦啦。。。
</div>
别的一类两栏自顺应用到的是margin的高低负值，特别在一栏高度流动，别的一栏高度

不定的两栏或多栏结构中最为罕见。高度不流动栏和高度流动的栏高低错开，均无浮动

属性，高度不流动的栏margin-top一个负值，巨细就是高度流动栏的高度，完成了两栏

在统一程度线上。且宽度自顺应，而且不必忧虑有浮动呈现的一系列成绩。

款式部分：

.fixed-height{
height:200px;
width:200px;
background:#666;
}
.flow-height{
margin-top:-200px;
margin-left:200px;
}
页面布局：

<divclass="container">
<divclass="fixed-height">
高度流动哦
</div>
<divclass="flow-height">
高度宽度自顺应，啦啦啦。。。高度宽度自顺应，啦啦啦。。。
</div>
</div>
2.在选项卡等边框线的处置
下图显现的是一种对照罕见的选项卡。


如图，利用margin-bottom:-1px;办理选项卡下边框显现的成绩。[注：]利用margin-

top、margin-bottom必要看布局怎样写，天真利用。

相似的，假如您要用七个div完成8条1像素的摆布边框，可让每一个div都有摆布1像素的

边框，然后margin-right:-1px;或是margin-left:-1px;让之间的边框堆叠来到达效

果。

3.图片与笔墨对齐成绩
当图片与笔墨在一同，常常都是不合错误齐的，由于图片和笔墨默许是底部对齐。当图片较

小对照分明，利用vertical-align:middle;对齐，在firefox，chrome下能到达幻想效

果，可是IE下仍是有点别扭。

利用margin负值能在每一个扫瞄器上显现完整分歧。img标签撑持margin四个偏向的正的

和负的定位。一样平常利用img标签来显现图标，要与笔墨对齐到达幻想的效果，能够设置

img{margin:03px-3px0;}。

4.埋没首（末）边框
本着布局只管简便，款式代码只管少，削减对js的依附的准绳，我们能够用款式来完成

列表项头尾无边框的效果，而无需分外设置诸如<liclass=”last”>最初一个</li>

款式部分：

<styletype="text/css">
ul{
margin:30px;
padding:0;
width:300px;
}
li{list-style:none;}
/**横排形式**/
.cross{
overflow:hidden;
zoom:1;
}/**overflow:hidden埋没最上边border，IE6必要zoom:1**/
.crossli{
float:left;
padding:011px010px;
border-left:1pxsolid#AAA;
margin-left:-1px;
}/*margin负值埋没失落最右边边框*/
/*竖排形式*/
.vertical{
overflow:hidden;
position:relative;
zoom:1;
}/*IE下子容器假如包括属性position:relative，则父容器生效(IEbug)，以是也必要设置父容器position:relative办理，IE6必要zoom:1来触发haslayout*/
.verticalli{
border-top:1pxdashed#CEE1EE;
padding:5px0;
position:relative;
top:-1px;
}/*竖排margin负值IE6不兼容，改成positon体例处置，与margin负值道理不异*/
</style>
布局部分：

<ulclass="cross">
<li>tab1-1</li>
<li>tab1-2</li>
<li>tab1-3</li>
<li>tab1-4</li>
</ul>
<ulclass="vertical">
<li>这里是一条信息</li>
<li>这里是一条信息</li>
<li>这里是一条信息</li>
<li>这里是一条信息</li>
<li>这里是一条信息</li>
</ul>
5.页面上完成csssprite背景定位效果

利用img界说margin的负值完成相似background-position效果。此办法能削减一个页

面哀求数，可是有背款式与结构分别的准绳，因而不保举利用

ps:

利用margin负值在IE6/IE7下的bug：有一部分被埋没失落了


<divstyle="height:120px;width:120px;border:5pxsolid#888">
<divstyle="background-color:#CEE1EE;margin-top:-10px;position:relative;zoom:1">
<ahref="http://www.poluoluo.com/">网页教授教养网</a></div>
</div>
办理办法：增加position:relative;zoom:1;
</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。

可以使用CSS检查工具进行设计。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

学Dreamweaver技术的过程其实是一个增加信心的过程。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。