负边距margin布局计算方法 -

liuguofeng

浏览: 448763 次
性别:
来自: 成都

最近访客更多访客>>

zjingye

cargoo

fkshl

freeman01

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

负边距margin布局计算方法

博客分类：

其实用负边距布局最大的优点就是布局不受html结构的影响，可以任意调换预备放在同一行的块的位置。这对于我们想要把最重要的内容最先呈现在用户面前有着很大的作用和益处。那么如何计算负边距呢？先看下面的代码。
<style type="text/css">
*{margin:0;padding:0;}
.wrap div{float:left;height:400px;}
.wrap {overflow:hidden;_zoom:1;}
.content{width:60%;background:gray;}
.nav{width:20%;background:orange;}
.infor{width:19%;background:green;}
</style>
<body>
<div class="wrap">
<div class="content">a</div>
<div class="nav">b</div>
<div class="infor">c</div>
</div>
</body>
这段代码从结构可以看出一个大的父包含框里有三个液态子块，css样式将这些子块向左浮动。在给出计算方法之前，我们需要做一个实验，给导航nav增添一个属性margin-left:20%;这时，我们通过浏览器的显示结果可以知道c模块也就是infor被挤到了下一行显示。再做个对比实验。在原始代码中，把c模块向左移动19%，也就是在infor中添加margin-left:-19%;的属性，浏览器这时会显示c模块覆盖在了b上，但是b和a的位置都没有发生移动。

通过上面实验的结果对比我们可以发现对浮动模块使用负边距可以覆盖在相应的浮动模块上，负边距的边距属性并不对其它模块的位置产生作用，他的移动参考点是以本身为参考的。这点和正边距是大为不同的。正边距以相邻模块的位置为参考点进行移动，并对周围模块进行合理地排挤。

好了，通过以上的解释，我们来实现一个bac的布局。我们需要花费很小的移动代价，以尽量少地影响其它模块的位置为前提来布局。我们需要让a模块为b预留相应的宽度位置，b的宽度为20%，所以我们给a增添margin-left:20%;的属性（在本文头部给出的原始未改动的代码中添加）。根据我们实验的结论可知，正边距会使得b和c模块相应的移动，也就是被挤离原来的位置20%，这时b模块要移动到最左边，需要超越a的60%宽度，并加上自己被挤走的20%，使用负边距属性margin-left:-80%;到达预定位置。好了，布局结束。

或许有人要问，那c模块呢，它不是被挤离了20%吗？嘿嘿，要记住abc都是被浮动了的啊，ab完成了位置交换活动，c的位置又没有被占领，c自然挤回去了。

那么，如果你明白了以上的原理，是否也能够自己实现其它的布局诸如acb，cab，bca呢？

分享到：

css样式表中margin负值的五种应用详解 | Android开发中java.lang.RuntimeException ...

2014-08-28 10:55
浏览 675
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

负边距margin布局计算方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

负边距margin布局计算方法

评论

发表评论

相关推荐

CSS实现二列等高布局及右边自适应宽度

关于CSS浮动以及清除浮动的几种方法

CSS3兼容旧版IE(6,7,8)解决方案

使用SVG中的Symbol元素制作Icon

CSS设计模式：OOCSS 和 SMACSS

编写可维护的CSS

人人FED CSS编码规范

那些年我们一起清除过的浮动

详解inline-block

前端精选文摘：BFC 神奇背后的原理

Block Formatting Context

CSS布局奇淫技巧之-宽度自适应

DIV+CSS规范命名大全集合

最常用和实用的CSS技巧

Web页面中八种创建多列等高(等高列布局)的实现技术

用好负边距，省时又省力

css样式表中margin负值的五种应用详解

javascript中的数据类型、Object与Function

如何减少浏览器repaint和reflow（下）

如何减少浏览器repaint和reflow（中）

最近访客更多访客>>