仓酷云

标题: 来看看：CSS网页制造教程:负margin制造自顺应摆布结构 [打印本页]

作者: 若相依 时间: 2015-1-15 22:57
标题: 来看看：CSS网页制造教程:负margin制造自顺应摆布结构
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
破洛洛文章简介：当margin四个值都为负数值的话，那末margin依照一般逻辑同四周元素发生边距。当元素margin的top和left是负值时会引发元素的向上或向左地位挪动。而当元素margin的bottom和right是负值时会影响右侧和下边相邻元素的参考线。
方才入手下手进修css的时分，我接纳了float为主来完成结构的体例，可是使用浮动很长一段工夫以后，我发明这是一种被人牵着鼻子走的做法。最少，页面上不该过量的使用浮动，特别是不要拿来断定全部结构。
很复杂的事理，当你用了float:left,前面的div极可能必要随着用float:left，并且当宽度不敷的时分，原本该和上一个div一个程度线上的div跑到上面往了，假如某个div有margin属性，还会碰到ie6谁人烦人的bug。并且浮动以后，你还必需在符合的中央利用扫除浮动。

为了抽象、易懂的注释负margin，我们将引进W3C上没有的参考线的说法。何谓参考线？参考线就是margin挪动的基准点，此基准点相对box(本身)是运动的。而margin的数值，就是box相对参考线的位移量。
一个完全的margin属性是这么写的margin:toprightbottomleft;(eg:margin:10px20px30px40px)。在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另外一类。top和left是之外元素为参考，right和bottom是以元素自己为参考。margin的位移偏向是指margin数值为正值时分的情况，假如是负值则位移偏向相反。

先看看一个完全的例子

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Margin参考线举例申明</title>
<styletype="text/css">
*{margin:0;padding:0;}
.wrap{width:400px;border:5pxsolid#aaa;}
.example{width:200px;height:200px;background:#CCCCFF;}
.normal{width:200px;height:200px;background:#CCE8CF;}

.example{margin:-10px20px-30px40px;}

</style>
</head>
<body>
<divclass="wrap">
<divclass="example">example元素：margin参考线举例申明笔墨，请检察此元素因为margin的变更所挪动的位移量。</div>
<divclass="normal">一个一般的Box</div>
</div>
</body>
</html>来剖析这段代码，example元素下方有一相邻元素normal（注：这里剖析的是增加和删除margin后的example元素，normal元素仅作为example元素前后效果的参照）。
依据上文的参考线道理margin:-10px(top)20px(right)-30px(bottom)40px(left);上-10px和左40px将之外元素为参考，所谓外元素就是本元素的界限元素（再口语点的注释就是元素的紧邻元素，这里触及到containingblock常识，可自行网上搜刮）。example元素上边和右边的界限元素即为wrap父元素，wrap父元素为基准点，example的margin-top为-10px，设想下假如这里margin-top为+10px会甚么情形，没错假如为+10px，example元素相对wrap父元素边沿为基准，那末example元素会同wrap父元素10px发生间隙边距，那末反过去，margin-tip:-10px;仍是与wrap父元素边沿为基准，反过去向上推10px的间隔地位。example元素的margin-left为40px，这里就依照一般逻辑相隔40px边距，同理假如为-40px，那末就是反偏向向左促进40px的间隔地位。
再来看example元素的margin-right和margin-bottom，由上文得知这俩个值是以元素自己为参考。甚么叫以元素自己为参考呢，切实寄义是指以本身为参考来影响四周元素的地位（本色即为影响下边和右侧相邻元素的参考线）。这里的margin-bottom为-30px，关于其本身地位没有任何变更，可是关于其下方元素normal元素发生了极年夜的影响，由于normal元素的上界限元素即为example元素，依据example元素界限来判断本身地位，设想下假如example元素margin-bottom为+30px，那末example元素将离隔下方的normal元素，反之为-30px，下方normal元素因为example参考线内凹，招致了normal元素自各儿不由自主的被“提”了上往了。这就是以本身为参考影响四周元素地位的寄义。
当margin四个值都为负数值的话，那末margin依照一般逻辑同四周元素发生边距。当元素margin的top和left是负值时会引发元素的向上或向左地位挪动。而当元素margin的bottom和right是负值时会影响右侧和下边相邻元素的参考线。

接上去我们将使用两个例子深切解说负margin手艺的使用范畴。
负margin在Tab选项卡中的使用：
最中心的就是下方俩行高亮部分代码，第二行的margin-bottom:-1px;使下方的注释部分向上“提”了1px的间隔，从而到达了鼠标上移后选项卡红色遮住下方玄色边框的效果（注：因为IE不是切合W3C尺度，以是当鼠标移到选项卡上时必要增加一个分外属性position:relative;来修复IE不掩盖下方边框的这个Bug）。第四行的margin-left:-1px;的目标是让四个选项卡向左挪动1px的间隔，到达摆布都只要一条支解线的效果。
.demoTab{width:400px;font:14px/1.5MicrosoftYaHei,verdana,Helvetica,Arial,sans-serif;}
.demoTab.demoTabHd{margin-bottom:-1px;border:1pxsolid#6C92AD;border-bottom:none;background:#EAF0FD;}
.demoTab.demoTabNav{height:28px;overflow:hidden;*zoom:1;}
.demoTab.demoTabList{float:left;margin-left:-1px;padding:022px;line-height:28px;border-left:1pxsolid#6C92AD;border-right:1pxsolid#6C92AD;font-weight:bold;color:#005590;text-align:center;cursor:pointer;}
.demoTab.demoTabList.current{position:relative;background:#fff;}
.demoTab.demoTabBd{border:1pxsolid#6C92AD;}
.demoTab.demoTabBd.roundBox{padding:15px;}
.demoTab.demoTabContent{display:none;}
.demoTab.demoTabContent.current{display:block;}

HTML代码：
<divid="demoTab"class="demoTab">
<divclass="demoTabHd">
<ulclass="demoTabNavclearfix">
<liclass="demoTabListcurrent">前端</li>
<liclass="demoTabList">实战</li>
<liclass="demoTabList">交互</li>
<liclass="demoTabList">优化</li>
</ul>
</div>
<divclass="demoTabBd">
<divclass="roundBox">
<divclass="demoTabContentcurrent">这是第一个选项卡的内容。</div>
<divclass="demoTabContent">这是第二个选项卡的内容。</div>
<divclass="demoTabContent">这是第三个选项卡的内容。</div>
<divclass="demoTabContent">这是第四个选项卡的内容。</div>
</div>
</div>
</div>

使用负margin制造自顺应摆布结构：
.demoLayout{width:500px;border:1pxsolid#aaa;background:#EEEEEE;}
.demoLayout.roundBox{padding:10px;min-height:170px;_height:170px;}
.demoLayout.demoShowPicimg{padding:1px;border:1pxsolid#DAA520;}
.demoText{margin:-170px00215px;}
.demoLayoutBtn{margin:15px000;}

<divid="demoLayout"class="demoLayout">
<divclass="roundBox">
<divclass="demoShowPic">使用负margin制造自顺应摆布结构</div>
</div>
</div>

如上例这类结构效果（右边一个流动图片，右侧为内容），负margin可以替换float浮动结构，举行摆布结构计划，而且具有float所没有的自顺应效果。
依据下面的几个实例，信任你已对负margin手艺有了一个对照完全的了解。负margin不仅能够做出一样平常CSS属性所不克不及到达的效果还可以化繁为简、化腐败为奇妙之奇效，固然负margin用到的中央不单单是这些，另有很多效果都是必要负margin手艺来完成的，只需你耐烦的往理论往探究，信任你会发明更多负margin用到得场所。</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

作者: 深爱那片海 时间: 2015-1-17 19:53
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

作者: 愤怒的大鸟 时间: 2015-1-26 22:08
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 爱飞 时间: 2015-2-5 01:20
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 透明 时间: 2015-2-11 02:14
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 山那边是海 时间: 2015-3-1 20:09
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 变相怪杰 时间: 2015-3-11 00:30
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 乐观 时间: 2015-3-17 17:10
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

欢迎光临仓酷云 (http://ckuyun.com/)