负边距margin布局计算方法

最新推荐文章于 2020-07-15 16:39:20 发布

iteye_15118

最新推荐文章于 2020-07-15 16:39:20 发布

阅读量187

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/iteye_15118/article/details/82603614

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

其实用负边距布局最大的优点就是布局不受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呢？